All Cheat Sheets
CSS Flexbox & Grid
Complete CSS Flexbox and Grid layout reference — containers, items, alignment, and common patterns.
Flexbox Container
Enable flex
display: flexDirection
flex-direction: row | columnWrap
flex-wrap: wrapJustify
justify-content: center | space-between | space-aroundAlign items
align-items: center | stretch | flex-startGap
gap: 1remFlexbox Items
Grow
flex-grow: 1Shrink
flex-shrink: 0Basis
flex-basis: 200pxShorthand
flex: 1 0 autoSelf align
align-self: flex-endOrder
order: -1Grid Container
Enable grid
display: gridColumns
grid-template-columns: repeat(3, 1fr)Rows
grid-template-rows: auto 1fr autoGap
gap: 1rem 2remAuto-fit
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))Areas
grid-template-areas: 'header header' 'nav main'Grid Items
Column span
grid-column: span 2Row span
grid-row: 1 / 3Area
grid-area: headerSelf place
place-self: centerAlignment (Both)
Center all
place-items: centerPlace content
place-content: centerJustify self
justify-self: endAlign content
align-content: space-betweenFree tools for this
Keep the references coming
One email a week: new and trending developer tools, fresh comparisons, and what shipped. Unsubscribe in one click.