Grid

grid container display: grid grid-template-columns: a b c ..(px,%,rem,fr,auto) grid-template-rows: a b c ..(px,%,rem,fr,auto) grid-template-rows(columns): repeat(times(auto-fill, auto-fit), a b c ..(px,%,rem,fr,auto)) grid-template-rows(columns): minmax(a(min), b(max)) grid-gap grid-row-gap: a (px,%,rem,fr,auto) grid-column-gap: a (px,%,rem,fr,auto) grid-template-areas: "a b c .." "a b c .." " .. "

grid items grid-column: a / b (lines) grid-column: a / b (lines) justify-self (horizon) stretch / start / center / end align-self (vertical) stretch / start / center / end justify-items (horizon all) stretch / start / center / end align-items (vertical all) stretch / start / center / end grid-area: area name; grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

Last updated