CSS Grid

Build responsive two-dimensional layouts with tracks and gaps.

Define tracks

display: grid;Create a grid formatting context

grid-template-columns: repeat(3, minmax(0, 1fr));Build three equal shrinkable columns

grid-template-columns: 15rem minmax(0, 1fr);Give a sidebar fixed width and content the rest

gap: 1rem;Set row and column gaps

grid-column: 1 / -1;Span all explicit columns

grid-column: span 2;Span two column tracks

grid-row: 2 / 4;Occupy rows between grid lines 2 and 4

align-items: start;Align content to the start of each grid area

grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));Fit columns without overflowing narrow screens

grid-auto-rows: minmax(6rem, auto);Set the size of implicit row tracks

place-items: center;Center items on both axes

min-width: 0;Permit long content to shrink inside grid items