# 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** turn on **Show advanced settings**, then enable **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** set **Width** to **Fill** so it grows and uses free space in the row
* On the second **Flex item** set **Width** to **Custom** and set a specific width such as 20% (mobile and desktop as needed)
* On the third **Flex item** set **Width** to **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
.png?alt=media)
%20(1).png?alt=media)