Grid layouts

Slab offers two main layout blocks for arranging content: Default grid and Flex grid. Each suits different layout needs. This guide covers both blocks and when to use them.

Default grid

The Default grid block creates a responsive grid of equal-width columns. Use it for product grids, image galleries, card layouts, or any content that benefits from a uniform grid structure.

When to use Default grid

• When you want to display a uniform grid where each row and column are the same width and height

Flex grid

The Flex grid block arranges child blocks in a row or column with flexible alignment and spacing. Use it for side-by-side layouts, stacked sections, hero layouts, or any content that needs flexible widths and alignment.

When to use Flex grid

• Create row or column layouts with configurable alignment

• Use horizontal direction for side-by-side content

• Use vertical direction for stacked content

• Control item widths with percentage-based or fill options

Common layouts

Using the Flex grid you can create many unique layouts. Here are a few examples to help illustrate how to achieve different grid configurations.

Grid with sticky position

Use this layout for content on one side that stays visible while scrolling.

• Use a Flex grid block

• On the parent Flex grid set Vertical alignment to Stretch

• On a child Flex item toggle Enable sticky layout

• Set Sticky position to Top

Grid with centered three columns

Use this layout for a navigation or header bar.

• Use a Flex grid block

• On the parent Flex grid disable Enable block wrap

• On the first Flex item toggle Enable width fill — this will force the block to fill available space in the row

• On the second Flex item set a specific width like 20%

• On the third Flex item toggle Enable width fill

• With this layout the first and last columns will automatically fill the remaining 80% of the row equally

Grid where two columns are pushed to either edge

Use this layout for editorial-style layouts.

• Use a Flex grid block

• On the parent Flex grid set Horizontal alignment to Between

• Add two child Flex item blocks

• The child blocks will now be pushed to the edges of the container

Grid with content aligned to bottom

Use this layout for editorial-style layouts.

• Use a Flex grid block

• On the parent Flex grid set Vertical alignment to End

• All child blocks will now be pushed to the bottom of the container