Addon · Grids
Three grid paradigms.
Auto-fit for cards. Classic 12-col for layouts. Fractions for precise control. Pick one. Or mix.
Auto-fit
Items wrap automatically based on a min-width. auto-fit-356- = each item at least --356- wide.
1
2
3
4
5
6
<div class="grid auto-fit-356- gap-20">...</div>
Classic 12-col
Use col-3, col-6, col-12. Sums to 12.
col-3
col-3
col-3
col-3
col-6
col-6
col-12
Fraction notation
Define columns as fractions of available space. Pure CSS Grid grid-template-columns: 1fr 2fr 1fr as utility classes.
1fr
1fr
1fr
2fr
1fr
2fr
1fr
Full reference
All grid utilities — in /llms.txt.
Auto-fit thresholds, container queries, gap modifiers, span notation. The complete utilities list.
Open /llms.txt →