Grid
A CSS Grid wrapper with a default gap of --s3 (24px). Set column counts with --cols-{n} modifiers, or use --auto for a responsive auto-fit layout.
Fixed columns
index.htmlhtml
<div class="ln-grid ln-grid--cols-3">
<div class="border p-2 text-center">One</div>
<div class="border p-2 text-center">Two</div>
<div class="border p-2 text-center">Three</div>
<div class="border p-2 text-center">Four</div>
<div class="border p-2 text-center">Five</div>
<div class="border p-2 text-center">Six</div>
</div>One
Two
Three
Four
Five
Six
Auto-fit columns
The --auto modifier uses repeat(auto-fit, minmax(…, 1fr)) to fill columns from a minimum track size.
index.htmlhtml
<div class="ln-grid ln-grid--auto">
<div class="border p-2 text-center">One</div>
<div class="border p-2 text-center">Two</div>
<div class="border p-2 text-center">Three</div>
<div class="border p-2 text-center">Four</div>
</div>One
Two
Three
Four
Grid items
Child items can span multiple columns or start at a specific column with the ln-grid__item element and its modifiers.
index.htmlhtml
<div class="ln-grid ln-grid--cols-4">
<div class="ln-grid__item ln-grid__item--span-2 border p-2 text-center">span-2</div>
<div class="border p-2 text-center">3</div>
<div class="border p-2 text-center">4</div>
<div class="ln-grid__item ln-grid__item--span-full border p-2 text-center">span-full</div>
</div>span-2
3
4
span-full
Responsive columns
Column modifiers accept a @{breakpoint} suffix to change the column count at different viewport widths. Combine a base column count with a responsive override for mobile-first layouts.
index.htmlhtml
<!-- 1 column on mobile, 3 columns from md up -->
<div class="ln-grid ln-grid--cols-1 ln-grid--cols-3@md">
<div class="border p-2 text-center">One</div>
<div class="border p-2 text-center">Two</div>
<div class="border p-2 text-center">Three</div>
<div class="border p-2 text-center">Four</div>
<div class="border p-2 text-center">Five</div>
<div class="border p-2 text-center">Six</div>
</div>One
Two
Three
Four
Five
Six
Responsive item positioning
Grid item start positions also support responsive suffixes. Reposition items at different breakpoints with --start-{n}@{bp}.
index.htmlhtml
<!-- Item starts at column 1 by default, column 3 from md up -->
<div class="ln-grid ln-grid--cols-4">
<div class="ln-grid__item ln-grid__item--span-2 ln-grid__item--start-3@md border p-2 text-center">
Repositioned at md
</div>
<div class="border p-2 text-center">B</div>
<div class="border p-2 text-center">C</div>
</div>Repositioned at md
B
C
Gap modifiers
index.htmlhtml
<!-- Compact gap -->
<div class="ln-grid ln-grid--cols-3 ln-grid--gap-xs mb-3">
<div class="border p-2 text-center">A</div>
<div class="border p-2 text-center">B</div>
<div class="border p-2 text-center">C</div>
</div>
<!-- Large gap -->
<div class="ln-grid ln-grid--cols-3 ln-grid--gap-lg">
<div class="border p-2 text-center">A</div>
<div class="border p-2 text-center">B</div>
<div class="border p-2 text-center">C</div>
</div>A
B
C
A
B
C
Reference
| Class | Description | Responsive |
|---|---|---|
.ln-grid | Grid container with default 24px gap | No |
.ln-grid--cols-{1–6} | Fixed column count | Yes |
.ln-grid--cols-12 | 12-column grid | Yes |
.ln-grid--auto | Auto-fit columns from a minimum track size | No |
.ln-grid--gap-xs | 8px gap | No |
.ln-grid--gap-sm | 16px gap | No |
.ln-grid--gap-md | 24px gap | No |
.ln-grid--gap-lg | 48px gap | No |
.ln-grid__item | Grid child element | No |
.ln-grid__item--span-{1–12} | Span N columns | Yes |
.ln-grid__item--span-full | Span all columns | Yes |
.ln-grid__item--start-{1–12} | Start at column N | Yes |
.ln-grid__item--subgrid | Subgrid for row alignment | No |