Grid System

Learn how to apply basic grid based layouts


Getting started with Grid

Grids are a useful tool to help containerize page content in columns.


Basic grid usage

You can build traditional grid systems using the grid display type with support up to 12 columns. You can combine the grid display property with the grid-cols-<1-12> property to set the column count.

<div class="grid grid-cols-2">
<div>...</div>
<div>...</div>
</div>

<div class="grid grid-cols-3">
<div>...</div>
<div>...</div>
<div>...</div>
</div>

<div class="grid grid-cols-4">
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>

Gutters

You can create gutters by applying the gap-<size> property. The gap property supports up to 29 sizes. To see a visual reference of each size please refer to the cheatsheet.

<div class="grid grid-cols-2 gap-36">...</div>

<div class="grid grid-cols-3 gap-48">...</div>

<div class="grid grid-cols-4 gap-18">...</div>

Responsive Gutters

Gutters can be responsive by prefixing the gap-<size> property with the breakpoint variant. For more information on media queries, please refer to media queries.

<div class="grid grid-cols-3 gap-12 sm.gap-24 md.gap-28 lg.gap-36">...</div>

Columns

You can specify the column count by applying the col-<count> property, if undefined, the column count will be 1.

<div class="grid grid-cols-5 gap-14">
<div class="col-1">...</div>
<div class="col-3">...</div>
<div class="col-1">...</div>
</div>

Responsive Columns

Both the grid column count and column span count can be responsive by prefixing the breakpoint variant. Adjust your browser width to see this in action.

<div class="grid grid-cols-1 md.grid-cols-5 gap-14">
<div class="col-1 md.col-1">...</div>
<div class="col-1 md.col-3">...</div>
<div class="col-1 md.col-1">...</div>
</div>