Containers, column tracks, item placement, gaps, and alignment — everything needed to build any grid layout.
cols-N on the parent — N equal tracks. Any positive integer works: cols-2, cols-12, cols-14.cols-fit-250 — auto-fit: as many ≥250px columns as fit, no breakpoints needed. cols-fill-250 keeps empty tracks.cols-1.3 or cols-1:3 — dots and colons both write ratio tracks (1:3, 1:3:1, etc.). Pick one style per project.minmax(0, Nfr), not a bare Nfr — a wide child (long unbreakable word, large image) can't stretch its column and break the ratio.span-N / rowspan-N on children — item spans N column or row tracks. colspan-N is an explicit alias for span-N.gap-N / gapx-N / gapy-N — spacing between tracks. Fluid-capable.cols-md-3, span-lg-4, gap-xl-32.container-{width}container-960
container-1100
container-1200
container-1440
container-1920
container-800 inside container-1200
grid cols-{n}grid cols-1 cols-md-2 cols-lg-41
2
3
4
grid cols-21
2
grid cols-31
2
3
cols-1 cols-sm-2 cols-md-3 cols-lg-4 cols-xl-6 cols-xxl-41
2
3
4
5
6
cols-fit-{min}As many columns of at least min width as fit — the browser recomputes on every resize, so no breakpoints are needed. Resize the window to watch the count change. min(…, 100%) keeps a lone column from overflowing narrow containers.
grid cols-fit-250 gap-16-32 — one class, every width correct≥250px
≥250px
≥250px
≥250px
≥250px
≥250px
cols-fit vs cols-fill — two items in a wide rowfit: stretches
fit: stretches
fill: stays ~200px
fill: stays ~200px
auto-fit collapses the empty tracks so items grow into them; auto-fill keeps them, so items hold their minimum. It responds to the container, not just the viewport — the same class yields fewer columns inside a sidebar. Use cols-N when the design demands an exact count. Breakpoint variant: cols-fit-md-300.
cols-{ratio} (dots or colons)cols-1 cols-md-1.3Sidebar (1fr)
Main (3fr)
cols-1 cols-md-1.3.1Left (1fr)
Main (3fr)
Right (1fr)
cols-1 cols-md-2.1Wide (2fr)
Narrow (1fr)
cols-1 cols-md-1:3 — same output as cols-md-1.3Sidebar (1fr)
Main (3fr)
gap / gapx / gapygap-16A
B
C
gap-8-40A
B
C
gapx-32-48 gapy-4-8A
B
C
D
align-centerShort
Tall column with more content to show vertical centering.
Short
justify-items-centerCentered
Centered
Centered
place-centerBoth axes
Both axes
Both axes
self-start
self-center
self-end
self-stretch
start
center
end
stretch
order-{n}order reorders grid items in source-independent order. Same syntax as flex — order-1, order-md-2, etc. See also Flexbox → Order.
A (order-1)
B
C
D
span-{n} / rowspan-{n}Applied to grid children. span-N makes an item occupy N column tracks; rowspan-N makes it span N rows. Positive integers only. Supports breakpoints: span-md-4, rowspan-lg-3.
span-2 on the first item (cols-3 parent)span-2 (2 cols wide)
B
C
D
E
span-2 rowspan-2 feature card (cols-3)Featured (span-2 rowspan-2)
B
C
D
E
md+ features a wide first itemfull width / span-md-2
B
C
D
cols-12 + span-NCombine a many-track parent with span on children for Bootstrap-style layouts. cols-N accepts any positive integer — cols-7, cols-12, cols-14, even cols-100 all work. Children claim however many tracks they need via span-N.
cols-12 span-2 span-102/12 sidebar
10/12 main
cols-12 span-4 span-4 span-44/12
4/12
4/12
cols-12 span-6 span-3 span-36/12
3/12
3/12
md+stacks mobile, 3/12 md+
stacks mobile, 9/12 md+
cols-7 span-2 span-5 (any N works)2/7
5/7
Two approaches produce identical visual output. Pick based on what changes at breakpoints:
cols-1.3.1)Best when proportions are fixed across the design. Parent declares the shape; children don't need any class.
cols-1 cols-md-1.3.1 = stack mobile, 1:3:1 md+
cols-12 + span-N)Best when children need to reflow responsively or the design follows a strict 12-column grid discipline.
cols-12 span-md-3 span-lg-4 = narrow on md, wider on lg