Skip to main content Accessibility Feedback

Grid

The .grid class creates a 12-column grid system with CSS Grid.

Fraction-Based Columns

Unlike many other grid systems, it uses fraction-based column sizes for easier math and layout design.

.item-third
.item-two-thirds
.item-fourth
.item-three-fourths
.item-half
.item-half
.item-fourth
.item-half
.item-fourth
<div class="grid">
	<div class="item-third">.item-third</div>
	<div class="item-two-thirds">.item-two-thirds</div>
</div>

<div class="grid">
	<div class="item-fourth">.item-fourth</div>
	<div class="item-three-fourths">.item-three-fourths</div>
</div>

<div class="grid">
	<div class="item-half">.item-half</div>
	<div class="item-half">.item-half</div>
</div>

<div class="grid">
	<div class="item-fourth">.item-fourth</div>
	<div class="item-half">.item-half</div>
	<div class="item-fourth">.item-fourth</div>
</div>

Column Sizes

Class Columns
.item-fourth 3/12
.item-third 4/12
.item-half 6/12
.item-two-thirds 8/12
.item-three-fourths 9/12

Mobile-First

You can implement mobile-first single-column layouts that transform into a grid at larger viewports by using a .grid-{bpSize} class instead of the default .grid.

Class Breakpoint
.grid-s 28em
.grid-m 32em
.grid-l 52em
.grid-xl 60em

Content Choreography

You can flip the order of grid items on bigger screens with a series of .start-* helper classes.

Add the .start-first class to move content to the beginning of a row. Use .start-{fraction} classes to start content at a specific spot in a grid.

1
2
3
1
2
1
2
3
<div class="grid-m">
	<div class="item-third">1</div>
	<div class="item-third start-first">2</div>
	<div class="item-third">3</div>
</div>

<div class="grid-m">
	<div class="item-third">1</div>
	<div class="item-third start-two-thirds">2</div>
</div>

<div class="grid-m">
	<div class="item-third start-two-thirds">1</div>
	<div class="item-third start-third">2</div>
	<div class="item-third start-first">3</div>
</div>

Automatic Grids

The .grid-auto class creates a grid layout where the column size is automatically calculated based on the content in your grid. Items automatically wrap onto the next row as needed.

Unlike the .cluster layout, every item is the same size.

Merlin
Gandalf
Radagast and his animals
Wand
Sword
Wizard Staff
The magical secrets of the universe
Potions
<div class="grid-auto">
	<div>Merlin</div>
	<div>Gandalf</div>
	<div>Radagast and his animals</div>
	<div>Wand</div>
	<div>Sword</div>
	<div>Wizard Staff</div>
	<div>The magical secrets of the universe</div>
	<div>Potions</div>
</div>

By default, .grid-auto uses a minimum width of 15ch. You can adjust this on a per-grid basis by setting a --width CSS variable directly on the grid.

--width: 9ch

Merlin
Gandalf
Radagast and his animals
Wand
Sword
Wizard Staff
The magical secrets of the universe
Potions

--width: 20ch

Merlin
Gandalf
Radagast and his animals
Wand
Sword
Wizard Staff
The magical secrets of the universe
Potions
<div class="grid-auto" style="--width: 9ch">
	<!-- ... -->
</div>

<div class="grid-auto" style="--width: 20ch">
	<!-- ... -->
</div>

Gap

You can adjust the amount of spacing between items using the .gap-* utility classes.

.gap-4xs

.item-third
.item-two-thirds

.gap-6xl

.item-third
.item-two-thirds
<div class="grid gap-4xs">
	<!-- ... -->
</div>

<div class="grid gap-6xl">
	<!-- ... -->
</div>

Align Items

By default, items in a .grid layout stretch to match the tallest child element.

You can adjust the vertical alignment with the .align-* utility classes.

.align-start

Item Third
Item
two
thirds

.align-center

Item Third
Item
two
thirds

.align-end

Item Third
Item
two
thirds
<div class="grid align-start">
	<!-- ... -->
</div>

<div class="grid align-center">
	<!-- ... -->
</div>

<div class="grid align-end">
	<!-- ... -->
</div>