Frontend EngineeringUpdated: 2026-11-04

Modern CSS Layouts: Complete Flexbox & CSS Grid Cheat Sheet

Quick visual reference for align-items, justify-content, grid-template-columns, minmax, and responsive layout patterns.

Modern web layouts rely on CSS Flexible Box Layout (Flexbox) for 1-dimensional component alignment and CSS Grid Layout for 2-dimensional page scaffolding. This cheat sheet provides exact property values, axis explanations, and bulletproof responsive recipes.

Flexbox: Container Properties Flexbox: Item Properties CSS Grid: Scaffolding & Column Templates Bulletproof Production Layout Recipes

Flexbox: Container Properties

Properties applied to the parent flex container element (`display: flex`).

Property	Values	Function & Behavior
flex-direction	`row` \| `row-reverse` \| `column` \| `column-reverse`	Establishes main axis direction. Default is `row`.
justify-content	`flex-start` \| `flex-end` \| `center` \| `space-between` \| `space-around` \| `space-evenly`	Aligns flex items along the main axis.
align-items	`stretch` \| `flex-start` \| `flex-end` \| `center` \| `baseline`	Aligns flex items along the cross axis.
flex-wrap	`nowrap` \| `wrap` \| `wrap-reverse`	Controls whether items wrap onto multiple lines.
gap	`1rem` \| `16px 24px`	Sets gutter spacing between flex items without margin hacks.

Flexbox: Item Properties

Properties applied to direct children of a flex container.

Property	Default	Description
flex-grow	`0`	Determines what fraction of available remaining space the item will absorb.
flex-shrink	`1`	Determines what fraction the item will shrink when space is constrained.
flex-basis	`auto`	Initial size of the item before remaining space is distributed.
flex	`0 1 auto`	Shorthand for `flex-grow flex-shrink flex-basis`. `flex: 1` expands equally.
align-self	`auto`	Overrides parent `align-items` for an individual child item.

CSS Grid: Scaffolding & Column Templates

Properties applied to CSS Grid containers (`display: grid`).

Responsive Auto-Fit Card Grid (Zero Media Queries)css

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

Cards automatically wrap and expand smoothly across all screen sizes without breakpoint media queries.

Classic 12-Column Grid Layoutcss

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.sidebar {
  grid-column: span 3;
}

.main-content {
  grid-column: span 9;
}

Divides horizontal space into 12 proportional fractions.

Bulletproof Production Layout Recipes

Copy-paste snippets for the most common CSS layout puzzles.

Perfect Center a Div (Flexbox)css

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Perfect horizontal and vertical centering on any viewport.

Perfect Center a Div (Grid - 2 Lines)css

.center-grid {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

The shortest and cleanest CSS centering technique.

Sticky Footer Layoutcss

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

Forces footer to stick to bottom of viewport even when page content is short.

Frequently Asked Questions

Should I use Flexbox or CSS Grid?

Use Flexbox for 1-dimensional content (rows or columns, such as navigation bars, button groups, and toolbar items). Use CSS Grid for 2-dimensional structures where you need aligned rows AND columns simultaneously (such as full page layouts and dashboard widgets).

What is the difference between auto-fill and auto-fit in CSS Grid?

Auto-fill creates as many tracks as will fit in the container, even if they remain empty. Auto-fit collapses empty tracks to 0px, causing populated items to stretch and fill the entire container width.

Back to All Cheat Sheets