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.
<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.
<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.
<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
--width: 20ch
<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
.gap-6xl
<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
two
thirds
.align-center
two
thirds
.align-end
two
thirds
<div class="grid align-start">
<!-- ... -->
</div>
<div class="grid align-center">
<!-- ... -->
</div>
<div class="grid align-end">
<!-- ... -->
</div>