.grid-span {
width: percentage( /* 23.7288136% */
((3 * 4em) + (2 * 1em)) / ((12 * 4em) + (11 * 1em))
);
margin-right: percentage( /* 01.6949153% */
1em / ((12 * 4em) + (11 * 1em))
);
padding-left: percentage( /* 08.4745763% */
((1 * 4em) + (1 * 1em)) / ((12 * 4em) + (11 * 1em))
);
}
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1em;
display: grid
)gap
<start> / <end>
grid-row / grid-column
row-start / col-start / row-end / col-end
* { box-sizing: border-box; }
html { block-size: 100%; }
body { min-block-size: 100%; }
distributing extra space
place-content
(block then inline)stretch
, center
, start
, end
space-between
, -around
, -evenly
align-content
& justify-content
place-items
and place-self
place-
content
to
Move Entire Layout
Which axis are we manipulating?
justify-*
props apply to the ‘inline’ axisalign-*
props apply to the ‘block’ axisstretch
start
| center
| end
space
-between
space
-around
space
-evenly
place-
self
to
Move Individual Items
Explicit on each element
place-
items
to
Move All Items
A default from the container
align-content
& justify-content
align-items
& justify-items
align-self
& justify-self
vertical-align
safe
‘clamps’ alignment at the startgrid-
template
:
<rows> / <columns>
minmax(
12em, 1fr
)
fit-content(
<limit>
)
clamp(auto, max-content,
<limit>
)
repeat(
<count>, <tracks>
)
repeat(2, 200px 1fr)
demo:
minmax(<min>, 1fr)
<min>
to avoid overflowdemo:
with matching *-start
& *-end
names
as column or row template
inherit
!