CSS

CSS Grid Cheat Sheet — Properties Reference

CSS Grid gives you two-dimensional layout. Container properties define the grid; item properties place things inside it.

Put it into practice with the matching tool.

Defining the grid

display: gridMake the element a grid container

grid-template-columns: 1fr 1fr 1frThree equal columns

grid-template-columns: repeat(3, 1fr)Same, written with repeat()

grid-template-rows: 100px autoFixed first row, content-sized second

gap: 16pxSpace between rows and columns

grid-auto-flow: columnPlace new items in columns instead of rows

1frOne fraction of the free space

minmax(200px, 1fr)At least 200px, grows to fill

autoSize to the content

repeat(auto-fit, minmax(200px, 1fr))Responsive columns with no media queries

min-content / max-contentSmallest / largest the content can be

grid-column: 1 / 3Span from line 1 to line 3

grid-column: span 2Span two columns from wherever it lands

grid-row: 2 / 4Span rows 2 to 4

grid-area: headerPlace into a named template area

grid-template-areas: "hd hd" "sb mn"Name regions of the layout

justify-items: centerAlign all items horizontally in their cell

align-items: centerAlign all items vertically in their cell

place-items: centerShorthand for both — centers everything

justify-content: space-betweenDistribute the whole grid horizontally

justify-self / align-selfOverride alignment for a single item

display:grid; place-items:center; min-height:100vhCenter one thing on the whole screen

grid-template-columns: repeat(auto-fill, minmax(240px,1fr))Responsive card grid

grid-template-columns: 250px 1frSidebar + main content

grid-column: 1 / -1Make an item span every column