CSS Flexbox & Grid Cheatsheet
Quick guide to modern CSS layout properties.
| Property | Description | Example | Category |
|---|---|---|---|
| display: flex | Enable flexbox | container { display: flex; } | Flexbox |
| flex-direction | Set flex direction | flex-direction: row | column; | Flexbox |
| justify-content | Align items horizontally | justify-content: center; | Flexbox |
| align-items | Align items vertically | align-items: center; | Flexbox |
| flex-wrap | Allow wrapping | flex-wrap: wrap; | Flexbox |
| gap | Space between items | gap: 10px; | Flexbox |
| flex | Grow/Shrink/Basis | flex: 1; | Flexbox |
| order | Change order of items | order: 2; | Flexbox |
| display: grid | Enable CSS Grid | container { display: grid; } | Grid |
| grid-template-columns | Define columns | grid-template-columns: repeat(3, 1fr); | Grid |
| grid-template-rows | Define rows | grid-template-rows: auto auto; | Grid |
| gap | Space between cells | gap: 20px; | Grid |
| place-items | Align grid items | place-items: center; | Grid |
| grid-column | Span columns | grid-column: span 2; | Grid |
| grid-row | Span rows | grid-row: span 2; | Grid |
| align-content | Align rows/columns | align-content: space-between; | Shared |
| justify-items | Align content inside grid | justify-items: center; | Shared |
| place-content | Align grid content | place-content: center; | Shared |