Grid
Use Grid utilities to build two-dimensional layouts with rows, columns, spans and placement control. Grid is best for page sections, card grids, dashboards, pricing layouts, galleries, feature blocks and complex responsive areas.
FrontAlign Grid utilities are built on native CSS Grid and map directly to predictable CSS output.
Quick reference
| Category | Classes | Purpose |
|---|---|---|
Enable | is-grid | Creates a grid formatting context. |
Columns | grid-cols-1 → grid-cols-12 | Defines equal-width column tracks. |
Auto columns | grid-cols-auto-fit-*, grid-cols-auto-fill-* | Creates responsive card-style grids without custom media queries. |
Rows | grid-rows-1 → grid-rows-6 | Defines explicit equal-height row tracks. |
Spans | col-span-*, row-span-* | Makes items occupy multiple tracks. |
Placement | col-start-*, col-end-*, row-start-*, row-end-* | Places items on explicit grid lines. |
Flow | grid-flow-row, grid-flow-col, grid-flow-row-dense, grid-flow-col-dense | Controls how auto-placed items fill the grid. |
Alignment | place-items-*, place-content-*, justify-items-* | Aligns grid items or the grid track area. |
Usage
A Grid layout starts with the is-grid display utility. Add column, row, span and gap utilities to shape the layout.
<div class="is-grid grid-cols-3 gap-4">
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
Fixed columns
Use grid-cols-1 through grid-cols-12 to create equal-width columns using 1fr tracks.
<div class="is-grid grid-cols-2 gap-3">
<div class="p-4 rounded bg-indigo-100">Left</div>
<div class="p-4 rounded bg-indigo-300">Right</div>
</div>
Left
Right
<div class="is-grid grid-cols-3 gap-3">
<div class="p-4 rounded bg-indigo-100">1</div>
<div class="p-4 rounded bg-indigo-200">2</div>
<div class="p-4 rounded bg-indigo-300">3</div>
</div>
1
2
3
<div class="is-grid grid-cols-4 gap-3">
<div class="p-4 rounded bg-indigo-100">1</div>
<div class="p-4 rounded bg-indigo-200">2</div>
<div class="p-4 rounded bg-indigo-300">3</div>
<div class="p-4 rounded bg-indigo-400">4</div>
</div>
1
2
3
4
12-column composition
The 12-column system gives you flexible asymmetric layouts such as 8 + 4, 6 + 6, and 3 + 9.
<div class="is-grid grid-cols-12 gap-3">
<div class="col-span-8 p-4 rounded bg-slate-100">Main content</div>
<div class="col-span-4 p-4 rounded bg-indigo-200">Sidebar</div>
</div>
Main content
Sidebar
<div class="is-grid grid-cols-12 gap-3">
<div class="col-span-6 p-4 rounded bg-slate-100">Left</div>
<div class="col-span-6 p-4 rounded bg-indigo-200">Right</div>
</div>
Left
Right
<div class="is-grid grid-cols-12 gap-3">
<div class="col-span-3 p-4 rounded bg-indigo-100">Nav</div>
<div class="col-span-9 p-4 rounded bg-slate-100">Content</div>
</div>
Nav
Content
Auto-fit columns
Use grid-cols-auto-fit-* when items should always stretch to fill the row. Empty tracks collapse.
<div class="is-grid grid-cols-auto-fit-sm gap-3">
<div class="p-4 rounded bg-teal-100">Card 1</div>
<div class="p-4 rounded bg-teal-200">Card 2</div>
<div class="p-4 rounded bg-teal-300">Card 3</div>
</div>
Card 1
Card 2
Card 3
| Class | Minimum column width |
|---|---|
grid-cols-auto-fit-xs | 120px |
grid-cols-auto-fit-sm | 200px |
grid-cols-auto-fit-md | 280px |
grid-cols-auto-fit-lg | 360px |
Auto-fill columns
Use grid-cols-auto-fill-* when empty tracks should be preserved and items should keep their minimum width.
<div class="is-grid grid-cols-auto-fill-sm gap-3">
<div class="p-4 rounded bg-teal-100">Card 1</div>
<div class="p-4 rounded bg-teal-200">Card 2</div>
</div>
Card 1
Card 2
| Class | Minimum column width |
|---|---|
grid-cols-auto-fill-xs | 120px |
grid-cols-auto-fill-sm | 200px |
grid-cols-auto-fill-md | 280px |
grid-cols-auto-fill-lg | 360px |
Use
auto-fitfor card grids that should fill the row. Useauto-fillwhen consistent item widths matter regardless of item count, such as tag lists or avatar rows.
Fixed rows
Use grid-rows-1 through grid-rows-6 when items should respect an explicit vertical grid.
<div class="is-grid grid-cols-3 grid-rows-2 gap-3" style="height: 160px;">
<div class="p-4 rounded bg-indigo-100">1</div>
<div class="p-4 rounded bg-indigo-200">2</div>
<div class="p-4 rounded bg-indigo-300">3</div>
<div class="p-4 rounded bg-indigo-400">4</div>
<div class="p-4 rounded bg-indigo-600">5</div>
<div class="p-4 rounded bg-indigo-700">6</div>
</div>
1
2
3
4
5
6
Auto row sizing
Control how implicitly created rows are sized as content moves into new rows.
| Class | Styles | Use when |
|---|---|---|
auto-rows-auto | grid-auto-rows: auto; | Each row should size to its tallest cell. |
auto-rows-min | grid-auto-rows: min-content; | Rows should be as short as their smallest possible content. |
auto-rows-max | grid-auto-rows: max-content; | Rows should be as tall as their largest possible content. |
auto-rows-fr | grid-auto-rows: 1fr; | Implicit rows should share equal height. |
<div class="is-grid grid-cols-3 auto-rows-fr gap-3" style="height: 180px;">
<div class="p-4 rounded bg-slate-100">Short</div>
<div class="p-4 rounded bg-slate-200">A bit longer content here that wraps</div>
<div class="p-4 rounded bg-slate-100">Short</div>
<div class="p-4 rounded bg-indigo-100">Short</div>
<div class="p-4 rounded bg-indigo-200">Short</div>
<div class="p-4 rounded bg-indigo-300">Short</div>
</div>
Short
A bit longer content here that wraps
Short
Short
Short
Short
Auto column sizing
Control implicitly created columns. This is most useful with grid-flow-col.
| Class | Styles |
|---|---|
auto-cols-auto | grid-auto-columns: auto; |
auto-cols-min | grid-auto-columns: min-content; |
auto-cols-fr | grid-auto-columns: 1fr; |
<div class="is-grid grid-rows-2 grid-flow-col auto-cols-fr gap-3">
<div class="p-4 rounded bg-teal-100">1</div>
<div class="p-4 rounded bg-teal-200">2</div>
<div class="p-4 rounded bg-teal-300">3</div>
<div class="p-4 rounded bg-indigo-100">4</div>
<div class="p-4 rounded bg-indigo-200">5</div>
<div class="p-4 rounded bg-indigo-300">6</div>
</div>
1
2
3
4
5
6
Minimum row heights
Use row-min-* to guarantee a minimum implicit row height while still allowing content to grow.
<div class="is-grid grid-cols-3 row-min-150 gap-3">
<div class="p-4 rounded bg-indigo-100">Feature 1</div>
<div class="p-4 rounded bg-indigo-200">Feature 2</div>
<div class="p-4 rounded bg-indigo-300">Feature 3</div>
</div>
Feature 1
Feature 2
Feature 3
| Class | Minimum height |
|---|---|
row-min-100 | 100px |
row-min-150 | 150px |
row-min-200 | 200px |
row-min-250 | 250px |
row-min-300 | 300px |
Column spanning
Use col-span-* to make an item occupy multiple column tracks. Use col-span-full to span every column.
<div class="is-grid grid-cols-4 gap-3">
<div class="col-span-full p-4 rounded bg-indigo-600 text-slate-100">Header</div>
<div class="col-span-3 p-4 rounded bg-indigo-100">Wide content</div>
<div class="p-4 rounded bg-indigo-200">Side</div>
<div class="col-span-2 p-4 rounded bg-teal-100">Left half</div>
<div class="col-span-2 p-4 rounded bg-teal-200">Right half</div>
</div>
Header
Wide content
Side
Left half
Right half
Available: col-span-1 → col-span-12, col-span-full.
Row spanning
Use row-span-* for editorial, magazine-style or dashboard layouts where an item should stretch across rows.
<div class="is-grid grid-cols-3 gap-3">
<div class="row-span-2 p-4 rounded bg-indigo-400 text-slate-100">Featured Article</div>
<div class="p-4 rounded bg-slate-100">Article 1</div>
<div class="p-4 rounded bg-slate-200">Article 2</div>
<div class="p-4 rounded bg-teal-100">Article 3</div>
<div class="p-4 rounded bg-teal-200">Article 4</div>
</div>
Featured Article
Article 1
Article 2
Article 3
Article 4
Available: row-span-1 → row-span-6, row-span-full.
Explicit column placement
Use col-start-* and col-end-* to control the exact grid lines where an item starts and ends.
<div class="is-grid grid-cols-12 gap-3">
<div class="col-start-1 col-end-5 p-4 rounded bg-teal-100">First third</div>
<div class="col-start-5 col-end-9 p-4 rounded bg-teal-200">Second third</div>
<div class="col-start-9 col-end-13 p-4 rounded bg-teal-300">Third third</div>
<div class="col-start-3 col-end-11 p-4 rounded bg-indigo-200">Centered content</div>
</div>
First third
Second third
Third third
Centered content
Available: col-start-1 → col-start-12, col-end-1 → col-end-12.
Explicit row placement
Use row-start-* and row-end-* to control an item's vertical grid-line position.
<div class="is-grid grid-cols-3 grid-rows-3 gap-3" style="height: 220px;">
<div class="col-span-3 p-4 rounded bg-indigo-600 text-slate-100">Header</div>
<div class="row-start-2 row-end-4 p-4 rounded bg-indigo-200">Sidebar</div>
<div class="col-span-2 p-4 rounded bg-slate-100">Main content row 2</div>
<div class="col-span-2 p-4 rounded bg-slate-200">Main content row 3</div>
</div>
Header
Sidebar
Main content row 2
Main content row 3
Available: row-start-1 → row-start-12, row-end-1 → row-end-12.
Grid flow
Use grid-flow-* to control how auto-placed items fill the grid. Dense variants backfill gaps left by spanning items.
<div class="is-grid grid-rows-2 grid-flow-col auto-cols-fr gap-3">
<div class="p-4 rounded bg-teal-100">1</div>
<div class="p-4 rounded bg-teal-200">2</div>
<div class="p-4 rounded bg-teal-300">3</div>
<div class="p-4 rounded bg-indigo-100">4</div>
<div class="p-4 rounded bg-indigo-200">5</div>
<div class="p-4 rounded bg-indigo-300">6</div>
</div>
1
2
3
4
5
6
<div class="is-grid grid-cols-4 grid-flow-row-dense gap-3">
<div class="col-span-3 p-4 rounded bg-indigo-600 text-slate-100">Wide item</div>
<div class="p-4 rounded bg-slate-100">1</div>
<div class="p-4 rounded bg-slate-200">2</div>
<div class="p-4 rounded bg-slate-100">3</div>
<div class="col-span-2 p-4 rounded bg-indigo-200">Medium item</div>
<div class="p-4 rounded bg-teal-100">4</div>
</div>
Wide item
1
2
3
Medium item
4
| Class | Styles |
|---|---|
grid-flow-row | grid-auto-flow: row; |
grid-flow-col | grid-auto-flow: column; |
grid-flow-row-dense | grid-auto-flow: row dense; |
grid-flow-col-dense | grid-auto-flow: column dense; |
Place items
Use place-items-* to set align-items and justify-items at the same time.
<div class="is-grid grid-cols-3 place-items-center gap-3" style="height: 180px;">
<div class="p-4 rounded bg-indigo-100">A</div>
<div class="p-4 rounded bg-indigo-200">B</div>
<div class="p-4 rounded bg-indigo-300">C</div>
</div>
A
B
C
| Class | Styles |
|---|---|
place-items-start | place-items: start; |
place-items-center | place-items: center; |
place-items-end | place-items: end; |
place-items-stretch | place-items: stretch; |
Place content
Use place-content-* to align the entire grid track area within the container. It is visible when the grid's total track size is smaller than the container.
<div class="is-grid grid-cols-3 place-content-center gap-3" style="height: 200px;">
<div class="p-4 rounded bg-teal-100">1</div>
<div class="p-4 rounded bg-teal-200">2</div>
<div class="p-4 rounded bg-teal-300">3</div>
</div>
1
2
3
| Class | Styles |
|---|---|
place-content-start | place-content: start; |
place-content-center | place-content: center; |
place-content-end | place-content: end; |
place-content-between | place-content: space-between; |
place-content-around | place-content: space-around; |
Justify items
Use justify-items-* to align each item inside its column track on the inline axis.
<div class="is-grid grid-cols-3 justify-items-center gap-3">
<div class="p-4 rounded bg-indigo-100">Item</div>
<div class="p-4 rounded bg-indigo-200">Item</div>
<div class="p-4 rounded bg-indigo-300">Item</div>
</div>
Item
Item
Item
| Class | Styles |
|---|---|
justify-items-start | justify-items: start; |
justify-items-center | justify-items: center; |
justify-items-end | justify-items: end; |
justify-items-stretch | justify-items: stretch; |
Grid-specific alignment includes place-items-*, place-content-*, and justify-items-*. Shared alignment utilities such as justify-content-*, align-items-*, align-self-*, and align-content-* also work with Grid and are documented in Flexbox.
Responsive
Only grid-cols-* and col-span-* include responsive variants. Breakpoints: sm: at 576px, md: at 768px, lg: at 1024px, and xl: at 1280px.
<div class="is-grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
<div class="p-4 rounded bg-indigo-100">Card 1</div>
<div class="p-4 rounded bg-indigo-200">Card 2</div>
<div class="p-4 rounded bg-indigo-300">Card 3</div>
<div class="p-4 rounded bg-indigo-400">Card 4</div>
</div>
Card 1
Card 2
Card 3
Card 4
<div class="is-grid grid-cols-12 gap-3">
<div class="col-span-12 md:col-span-8 p-4 rounded bg-slate-100">Main content</div>
<div class="col-span-12 md:col-span-4 p-4 rounded bg-indigo-200">Sidebar</div>
</div>
Main content
Sidebar
row-span-*,row-start-*,row-end-*,col-start-*,col-end-*, and flow utilities do not have responsive variants.
Real-world patterns
Blog layout
<div class="is-grid grid-cols-12 gap-3">
<main class="col-span-12 md:col-span-8 p-4 rounded bg-slate-100">
<article>...</article>
</main>
<aside class="col-span-12 md:col-span-4 is-grid gap-3">
<div class="p-4 rounded bg-indigo-100">Related posts</div>
<div class="p-4 rounded bg-teal-100">Newsletter</div>
</aside>
</div>
Responsive card grid
<div class="is-grid grid-cols-auto-fit-sm gap-3">
<div class="p-4 rounded bg-indigo-100">Card 1</div>
<div class="p-4 rounded bg-indigo-200">Card 2</div>
<div class="p-4 rounded bg-indigo-300">Card 3</div>
<div class="p-4 rounded bg-teal-100">Card 4</div>
<div class="p-4 rounded bg-teal-200">Card 5</div>
</div>
Card 1
Card 2
Card 3
Card 4
Card 5
Dashboard layout
<div class="is-grid grid-cols-12 grid-rows-3 gap-3" style="min-height: 420px;">
<header class="col-span-full p-4 rounded bg-indigo-700 text-slate-100">Header</header>
<nav class="col-span-3 row-span-2 p-4 rounded bg-indigo-100">Sidebar</nav>
<main class="col-span-9 p-4 rounded bg-slate-100">Main content</main>
<div class="col-span-3 p-4 rounded bg-teal-100">Stat 1</div>
<div class="col-span-3 p-4 rounded bg-teal-200">Stat 2</div>
<div class="col-span-3 p-4 rounded bg-teal-300">Stat 3</div>
<footer class="col-span-full p-4 rounded bg-slate-200">Footer</footer>
</div>
Stat 1
Stat 2
Stat 3
Centered full-page card
<div class="is-grid place-items-center rounded bg-indigo-50" style="min-height: 220px;">
<div class="p-4 rounded bg-indigo-600 text-slate-100">Perfectly centered</div>
</div>
Perfectly centered
Masonry-style photo gallery
<div class="is-grid grid-cols-4 auto-rows-min gap-1">
<img class="col-span-2 row-span-2" src="hero.jpg" alt="">
<img src="photo1.jpg" alt="">
<img src="photo2.jpg" alt="">
<img src="photo3.jpg" alt="">
<img src="photo4.jpg" alt="">
</div>
Hero image
Photo 1
Photo 2
Photo 3
Photo 4
Class reference
| Category | Available classes |
|---|---|
Enable | is-grid → see Display |
Columns | grid-cols-1 → grid-cols-12 |
Auto columns | grid-cols-auto-fit-xs/sm/md/lg, grid-cols-auto-fill-xs/sm/md/lg |
Rows | grid-rows-1 → grid-rows-6 |
Auto rows | auto-rows-auto/min/max/fr |
Auto cols | auto-cols-auto/min/fr |
Min row height | row-min-100/150/200/250/300 |
Column span | col-span-1 → col-span-12, col-span-full |
Row span | row-span-1 → row-span-6, row-span-full |
Column position | col-start-1 → col-start-12, col-end-1 → col-end-12 |
Row position | row-start-1 → row-start-12, row-end-1 → row-end-12 |
Flow | grid-flow-row/col/row-dense/col-dense |
Place items | place-items-start/center/end/stretch |
Place content | place-content-start/center/end/between/around |
Justify items | justify-items-start/center/end/stretch |
Shared alignment | justify-content-*, align-items-*, align-self-* → see Flexbox |
Responsive | sm:, md:, lg:, xl: with grid-cols-* and col-span-* only |
Usage notes
- Use
is-gridbefore applying Grid utilities. - Use
gap-*utilities for spacing between rows and columns. - Use
grid-cols-auto-fit-*for fluid responsive card layouts. - Use
grid-cols-12withcol-span-*for structured page layouts. - Use
col-span-*androw-span-*for layout composition. - Use placement utilities only when explicit grid-line control is needed.
- Use Grid for two-dimensional layout and Flexbox for one-dimensional alignment inside each grid item.