CSS Flexbox & Grid Sheet
CSS Flexbox and Grid layout properties, values, and common layout patterns.
2 PagesBeginnerMay 2, 2026
Flexbox Container
Properties set on the flex parent.
css
.container { display: flex; flex-direction: row; /* row | column */ justify-content: center; /* main axis */ align-items: center; /* cross axis */ gap: 1rem; flex-wrap: wrap;}
Flexbox Item
Properties set on flex children.
css
.item { flex: 1 1 auto; /* grow shrink basis */ align-self: flex-start; order: 2;}
Grid Container
Define a grid layout.
css
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 1rem;}
Grid Item Placement
Position items within the grid.
css
.item { grid-column: 1 / 3; /* span columns 1-2 */ grid-row: 2 / 4; /* span rows 2-3 */}
Named Grid Template Areas
Lay out a page visually with named areas.
css
.layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header header" "sidebar main" "footer footer"; min-height: 100vh;}.header { grid-area: header; }.sidebar { grid-area: sidebar; }.main { grid-area: main; }.footer { grid-area: footer; }
Responsive Auto-Fit Grid
Fluid card layouts with no media queries.
css
.cards { display: grid; gap: 1rem; /* Columns wrap automatically at 250px min */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));}/* auto-fill leaves empty tracks; auto-fit collapses them */.gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}
Centering Techniques
Reliable ways to center content.
css
/* Flex centering */.center-flex { display: flex; justify-content: center; align-items: center;}/* Grid one-liner */.center-grid { display: grid; place-items: center; }/* Absolute + transform */.center-abs { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
Sizing Functions & Units
Modern CSS length tools for fluid layouts.
- min(a, b)- use whichever value is smaller, e.g. width: min(90%, 60ch)
- max(a, b)- floor a value, e.g. padding: max(1rem, 2vw)
- clamp(min, ideal, max)- fluid value bounded by a min and max, great for font-size
- fr- fractional unit that splits leftover grid/flex space
- ch / ex- width of the 0 glyph / x-height, handy for text measures
- dvh / svh / lvh- dynamic/small/large viewport height that accounts for mobile bars
- gap- spacing between flex/grid items without margins on children
Pro Tip
Use Flexbox for one-dimensional layouts (a row or a column) and Grid for two-dimensional layouts.
Was this cheat sheet helpful?
Explore Topics
#CSSFlexboxGridSheet#WebDevelopment#Beginner#FlexboxContainer#FlexboxItem#GridContainer#GridItemPlacement#CheatSheet#SkillVeris#QuickReference
