v1 grid utilities: grid-cols-*, gap-*, alignment and named areas. The frozen v1.0.0 stylesheet contains 69 classes in this family.
Classes#
| Class | Notes |
|---|---|
grid | — |
contents | — |
items-start | — |
items-end | — |
items-center | — |
items-baseline | — |
items-stretch | — |
justify-start | — |
justify-end | — |
justify-center | — |
justify-between | — |
justify-around | — |
justify-evenly | — |
gap-0 | Gutter from the --space scale |
gap-px | Gutter from the --space scale |
gap-0-5 | Gutter from the --space scale |
gap-1 | Gutter from the --space scale |
gap-1-5 | Gutter from the --space scale |
gap-2 | Gutter from the --space scale |
gap-2-5 | Gutter from the --space scale |
gap-3 | Gutter from the --space scale |
gap-3-5 | Gutter from the --space scale |
gap-4 | Gutter from the --space scale |
gap-5 | Gutter from the --space scale |
gap-6 | Gutter from the --space scale |
gap-7 | Gutter from the --space scale |
gap-8 | Gutter from the --space scale |
gap-9 | Gutter from the --space scale |
gap-10 | Gutter from the --space scale |
gap-12 | Gutter from the --space scale |
gap-14 | Gutter from the --space scale |
gap-16 | Gutter from the --space scale |
gap-20 | Gutter from the --space scale |
gap-24 | Gutter from the --space scale |
gap-32 | Gutter from the --space scale |
grid-cols-1 | Column templates 1–12 |
grid-cols-2 | Column templates 1–12 |
grid-cols-3 | Column templates 1–12 |
grid-cols-4 | Column templates 1–12 |
grid-cols-5 | Column templates 1–12 |
grid-cols-6 | Column templates 1–12 |
grid-cols-7 | Column templates 1–12 |
grid-cols-8 | Column templates 1–12 |
grid-cols-9 | Column templates 1–12 |
grid-cols-10 | Column templates 1–12 |
grid-cols-11 | Column templates 1–12 |
grid-cols-12 | Column templates 1–12 |
col-span-1 | — |
col-span-2 | — |
col-span-3 | — |
col-span-4 | — |
col-span-5 | — |
col-span-6 | — |
col-span-7 | — |
col-span-8 | — |
col-span-9 | — |
col-span-10 | — |
col-span-11 | — |
col-span-12 | — |
col-span-full | — |
Usage#
index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nakshora/nakshora@main/minified-version/v1.0.0.css" />
<div class="grid">…</div>Scaling beyond v1#
v1 utilities are frozen — no JIT, no arbitrary values. When you outgrow them, the releases/migration-v1-to-v3|migration guide moves you to the modern engine where this family gains responsive variants, state variants and 11,417 utilities.