CSS Flexbox & Grid Cheatsheet
Complete reference for CSS Flexbox and Grid layout — every container and item property with values and explanations for building modern responsive layouts.
Flexbox
One-dimensional layout for rows or columns
Container Properties
displayflex | inline-flexDefines a flex container; inline or block depending on the given valueflex-directionrow | row-reverse | column | column-reverseSets the main axis direction — horizontal (row) or vertical (column)flex-wrapnowrap | wrap | wrap-reverseControls whether items wrap to new lines when they overflow the containerflex-flow<flex-direction> <flex-wrap>Shorthand for flex-direction and flex-wrap combinedjustify-contentflex-start | flex-end | center | space-between | space-around | space-evenlyAligns items along the main axis — controls distribution of extra spacealign-itemsstretch | flex-start | flex-end | center | baselineAligns items along the cross axis (perpendicular to main axis)align-contentstretch | flex-start | flex-end | center | space-between | space-aroundAligns rows of wrapped items along the cross axis (only applies when items wrap)gap<row-gap> <column-gap>Sets the space between flex items — cleaner than marginsItem Properties
flex-grow<number> (default: 0)How much the item should grow relative to siblings when extra space is availableflex-shrink<number> (default: 1)How much the item should shrink relative to siblings when space is insufficientflex-basis<length> | auto (default: auto)The initial size of the item before flex-grow/shrink apply — can be px, %, or contentflex<grow> <shrink> <basis>Shorthand for flex-grow, flex-shrink, and flex-basis. Common: flex: 1 (grow equally)align-selfauto | flex-start | flex-end | center | baseline | stretchOverrides the container's align-items for this individual itemorder<integer> (default: 0)Controls the visual order of the item — lower values appear firstGrid
Two-dimensional layout for rows and columns simultaneously
Container Properties
displaygrid | inline-gridDefines a grid container; all direct children become grid itemsgrid-template-columns<track-sizes> | repeat() | auto-fill | auto-fitDefines the number and size of columnsgrid-template-rows<track-sizes> | repeat() | auto-fillDefines the number and size of rowsgrid-template-areas"header header" "sidebar main" "footer footer"Defines named grid areas using string templates for intuitive layoutsgap / grid-gap<row-gap> <column-gap>Sets the space between grid rows and columnsjustify-itemsstart | end | center | stretchAligns all grid items horizontally within their cellalign-itemsstart | end | center | stretchAligns all grid items vertically within their celljustify-contentstart | end | center | stretch | space-between | space-around | space-evenlyAligns the entire grid horizontally within the container (when grid is smaller than container)align-contentstart | end | center | stretch | space-between | space-around | space-evenlyAligns the entire grid vertically within the containergrid-auto-flowrow | column | denseControls how auto-placed items fill the grid — row-by-row, column-by-column, or densely packedgrid-auto-columns<track-size>Sets the size of implicitly created columns (when items overflow explicit grid)grid-auto-rows<track-size>Sets the size of implicitly created rowsItem Properties
grid-column<start> / <end> | span <n>Sets which column lines the item starts and ends atgrid-row<start> / <end> | span <n>Sets which row lines the item starts and ends atgrid-area<name> | <row-start> / <col-start> / <row-end> / <col-end>Assigns the item to a named area or defines its position in one shorthandjustify-selfstart | end | center | stretchOverrides justify-items for this item — aligns it horizontally in its cellalign-selfstart | end | center | stretchOverrides align-items for this item — aligns it vertically in its cellplace-self<align-self> <justify-self>Shorthand for align-self and justify-self in one declarationUseful Functions & Units
repeat()repeat(count, track-size)Repeats a track pattern — e.g. repeat(3, 1fr) creates 3 equal columnsminmax()minmax(min, max)Defines a size range for a track — e.g. minmax(200px, 1fr) for responsive columnsauto-fillrepeat(auto-fill, minmax(…))Creates as many tracks as fit in the container, leaving empty tracks if space remainsauto-fitrepeat(auto-fit, minmax(…))Like auto-fill but collapses empty tracks, stretching items to fill the containerfr unit1fr, 2fr, etc.Represents a fraction of available space — 1fr 2fr gives ⅓ and ⅔ respectivelyfit-content()fit-content(max)Clamps a track to its content size with a maximum — useful for sidebar columnsFAQ
When should I use Flexbox vs Grid?
Flexbox is ideal for one-dimensional layouts (a single row or column) — navbars, card rows, centering. Grid excels at two-dimensional layouts where you need control over both rows and columns simultaneously — page layouts, dashboards, complex forms. Many real UIs use both: Grid for the page structure, Flexbox for components within cells.
What does 'fr' mean in CSS Grid?
The fr (fraction) unit represents a share of the available space in the grid container. 1fr 1fr creates two equal columns; 1fr 2fr gives the second column twice the width. The fr unit distributes space after fixed-size tracks (px, %, etc.) are calculated.
What is the difference between auto-fill and auto-fit?
Both create as many tracks as fit, but they differ when there's extra space. auto-fill keeps empty tracks (the container has invisible columns). auto-fit collapses empty tracks so existing items stretch to fill the space. Use auto-fit for responsive grids where items should expand.
How do I center something with Flexbox?
Apply display: flex; justify-content: center; align-items: center; to the parent container. This centers the child both horizontally and vertically. For Grid, use display: grid; place-items: center; for the same effect with even less code.