Grid
Grid templates, placement, auto flow and alignment.
1 min readv1
Responsive columns without media queries#
HTML
1
2
3
4
5
<div nib="d=grid; gtc=repeat(auto-fill, minmax(90px, 1fr)); g=8px; w=320px">
<div nib="p=14px; bdrd=8px; bgc=#EEEFFE; cl=#312e81; txa=center">1</div>
<div nib="p=14px; bdrd=8px; bgc=#EEEFFE; cl=#312e81; txa=center">2</div>
<div nib="p=14px; bdrd=8px; bgc=#EEEFFE; cl=#312e81; txa=center">3</div>
<div nib="p=14px; bdrd=8px; bgc=#EEEFFE; cl=#312e81; txa=center">4</div>
<div nib="p=14px; bdrd=8px; bgc=#EEEFFE; cl=#312e81; txa=center">5</div>
</div>Spanning and placing#
HTML
gc=span 2
grw=span 2
·
·
<div nib="d=grid; gtc=repeat(3, 1fr); g=8px; w=300px">
<div nib="gc=span 2; p=14px; bdrd=8px; bgc=#4F52D9; cl=#fff">gc=span 2</div>
<div nib="grw=span 2; p=14px; bdrd=8px; bgc=#0891b2; cl=#fff">grw=span 2</div>
<div nib="p=14px; bdrd=8px; bgc=#e2e8f0; cl=#0f172a">·</div>
<div nib="p=14px; bdrd=8px; bgc=#e2e8f0; cl=#0f172a">·</div>
</div>Named areas#
HTML
<div nib="d=grid; gtc=220px 1fr; gtr=auto 1fr auto; gta='header header' 'nav main' 'footer footer'; mnh=100vh">
<header nib="gc=1 / -1">…</header>
<nav nib="grs=2">…</nav>
<main>…</main>
<footer nib="gc=1 / -1">…</footer>
</div>All grid shorthands#
Shorthand | CSS property |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|