css principles
🚀
master the principles, create better UIs
tags & categories
showing category
grid
1
posts
»
0
0
3
grid: dabble in precision: fundamental principles
summary
Lines are numbered from 1
The
grid-area
format is RCRC (row-col-row-col, start-start-end-end).
Gaps add space evenly to both sides of a line (but not to lines at the edges).
fr
causes tracks to take all the remaining space, shared between
fr
units.
minmax
has 4 steps: mins, static maxs, fr balancing, fr balanced.
Auto tracks are only added for either rows or cols, never both.
justify-content
and
align-content
manage the extra white space inside the grid container and distribute it around the tracks.
repeat
:
auto-fill
creates as many tracks as possible, ignores items.
auto-fit
same as fill, but removes tracks with no items.
read post 003 »