Epic CSS / Documentation
Grid
Use CSS Grid for rows and columns. Add grid for display, a column utility for the tracks, and a gap utility for spacing.
Auto-fitting columns
grid-col-3 uses repeat(auto-fit, minmax(270px, 1fr)). It fits as many columns as the available space permits; it does not force exactly three columns.
<div class="grid grid-col-3 gap-16">
<div class="docs-demo-item">One</div>
<div class="docs-demo-item">Two</div>
<div class="docs-demo-item">Three</div>
</div>| Class | Generated declaration |
|---|---|
grid | display: grid |
grid-col-2 | grid-template-columns: repeat(auto-fit, minmax(331px, 1fr)) |
grid-col-3 | grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) |
The minimum track widths are real minimums. A container narrower than 270 or 331 pixels can overflow. Choose the utility for your available content width, rather than treating the number in its name as a guaranteed column count.
Space between tracks
gap-16 sets both row and column gap to one rem. These are the current spacer keys:
0, 4, 6, 8, 10, 12, 16, 18, 20, 24, 32, 40, 56, 60, 64, 80, 100.
The values are rem-based Sass multipliers, not a general pixel parser. In the current scale both gap-16 and gap-18 resolve to one rem.
Sidebar layouts
Combine grid and grid-sidebar-left for a one-column starting layout, then select a large-screen sidebar width.
<div class="grid grid-sidebar-left lg-grid-sidebar-left-25 gap-24">
<div class="docs-demo-item">Sidebar</div>
<div class="docs-demo-item">Main content</div>
</div>| Class | Large-screen tracks |
|---|---|
lg-grid-sidebar-left-25 | 25% 1fr |
lg-grid-sidebar-left-30 | 30% 1fr |
lg-grid-sidebar-left-40 | 40% 1fr |
The current sidebar rules start in the 960-pixel breakpoint but are overridden back to one column through 1024 pixels. The two-track sidebar layout therefore takes effect above 1024 pixels. That is the existing output; no extra example CSS changes its behavior here.
Other existing layout helpers
left-sidebar-sm creates a grid from 756 pixels with tracks minmax(140px, auto) 1fr and a six-percent gap. grid-1fr-4fr-md uses 1fr 4fr from 820 pixels; the current sidebar override temporarily stacks it between 960 and 1024 pixels. These describe the current rules, rather than additional utilities added for the docs.
Containers and widths
| Class | Effect |
|---|---|
wrapper | Five percent padding on each side. |
container | Centered container with the Sass-configured maximum width, currently 1000 pixels. |
container-post | Centered container with a fixed maximum width of 1000 pixels. |
w-100 | Full available width. |
margin-auto | margin: 0 auto, resetting vertical margins and centering horizontally where the available width permits. |
sm-w-25, md-w-50, lg-w-75 | Examples of breakpoint-prefixed 25%, 50%, and 75% widths. |
The generated width prefixes are xs, sm, md, lg, and xl, using the same breakpoints as Flexbox. Percentage widths combined with gaps can exceed the parent's available width; use the auto-fitting grid where it better fits the content.