GoKawiilDefining rows creates a horizontal brick layout. Tab order flows up and down. Each item is placed wherever puts it closest to the inline start edge.
Defining columns creates a vertical waterfall. Tab order flows back and forth across the page. Each item is placed wherever puts it closest to the top. Additional items can be lazy-loaded at the bottom.
Apply display: grid-lanes to a layout container. Then define columns or rows. The children pack into grid lanes automatically.
Options for Lane Definitions
fr unit One fractional unit. Divides available space proportionally. 1fr 2fr 1fr gives the middle track twice the width. grid-template-columns: 1fr 2fr 1fr;
Fixed lengths Use any CSS unit to define a fixed size. The classics: px , em , rem . Newer ones: ch (a character’s width), lh (a line’s height). Plus powerful viewport and container units. Pick the unit that fits the job. grid-template-columns: 12ch 1fr 20rem;
Percentage The % unit resolves to percentage of the container’s size. It works — but fr units are usually a better fit, since they account for gap and % doesn’t. Plus you won’t have to worry about adding up to 100%. grid-template-columns: 25% 75%;
auto Sized by content. Stretches to fill remaining space when there’s room. grid-template-columns: auto 1fr;
min-content & max-content min-content Most Narrow max-content Widest it can possibly be, no wrap min-content makes a box the smallest it can be without overflow. max-content makes a box the biggest it can be, sized to its content. grid-template-columns: max-content 1fr; grid-template-columns: min-content 1fr;
fit-content() 300px ceiling Box shrinks With more content, box grows to limit declared and content wraps Shrink-wrap with a ceiling. When there’s less content, fit-content behaves just like max-content . When there’s more content, it doesn’t grow beyond the declared size. grid-template-columns: fit-content(300px) 1fr;
... continue reading