CSS Flex & Grid Cheat Sheet
Show more
Hide more
Print
CSS layout
Flex (parent)
display:flex, inline-flex Documentation
flex-direction:row, column // Defines main axis → ↓ Documentation
flex-wrap:no-wrap, wrap, wrap-reverse Documentation
flex-flow:row wrap // Shorthand: direction/wrap Documentation
gap:em, px, % etc. // Gutters between rows & cols Documentation
align-items: (axis)start, center, end, stretch
// → Documentation
// → Documentation
align-content: (axis)start, center, end, space-between/around
// → Documentation
// → Documentation
justify-content: (axis)start, center, end, space-between/around
// → Documentation
// → Documentation
Flex (children)
flex-grow:1 // Sets flex grow factor Documentation
flex-shrink:1 // Sets flex shrink factor Documentation
flex-basis:50px // initial size Documentation
flex:1 50px // Shorthand: grow/shrink*/basis* *opt Documentation
align-self:Overide 'align-items' Documentation
order:1, 3, -5 etc. // Change order Documentation
Grid (parent)
display:grid, inline-grid, subgrid Documentation
grid-template-columns:2fr 1fr 1fr, repeat(3, 1fr) // → Documentation
grid-template-rows:1fr 2fr, repeat(2, 1fr) // ↓ Documentation
gap:em, px, % etc. // Gutters between rows & cols Documentation
grid-template-areas:"header header"
"sidebar content"
"footer footer" Documentation
"sidebar content"
"footer footer" Documentation
grid:"header header" 1fr
"side main 3fr / 2fr 5fr" // areas row / cols Documentation
"side main 3fr / 2fr 5fr" // areas row / cols Documentation
repeat():repeat(3, 1fr, 10em, auto-fill/fit) // Repeat Documentation
minmax():minmax(50px, auto) // Defines size range Documentation
min-content:min-content // Minimum w/h Documentation
max-content:max-content // Maximum w/h Documentation
fit-content:fit-content // Available space (< fit-content) Documentation
fit-content():fit-content(8ch) // Space formula based Documentation
grid-auto-columns:auto, 90px, min-content, minmax() // → Documentation
grid-auto-rows:auto, 70px, max-content, minmax() // ↓ Documentation
grid-auto-flow:row, column, (row/column) dense // → ↓ Documentation
align-items: (axis)start, center, end, stretch
// → Documentation
// → Documentation
align-content: (axis)start, center, end, space-between/around
// → Documentation
// → Documentation
justify-content: (axis)start, center, end, space-between/around
// → Documentation
// → Documentation
justify-items: (axis)start, center, end, stretch
// → Documentation
// → Documentation
place-items:center stretch // Shorthand: align/justify Documentation
Grid (children)
grid-area:header, etc // Define for grid-template-areas Documentation
align-self:Overide 'align-items' Documentation
justify-self:Overide 'justify-items' Documentation
order:1, 3, -5 etc. // Change order Documentation
grid-column-start:auto, 2, -1, span 2 // → Start position Documentation
grid-column-end:auto, 2, -1, span 2 // → End position Documentation
grid-column:1, 1 / 3, span 2 // → Shorthand: start/end Documentation
grid-column-start:auto, 2, -1, span 2 // ↓ Start position Documentation
grid-row-end:auto, 2, -1, span 2 // ↓ End position Documentation
grid-row:2, 2 / 4, span 2 // ↓ Shorthand: start/end Documentation