DevTools Logo

CSS Grid & Flexbox Cheat Sheet

Quick reference for CSS layout: Flexbox alignment, Grid template areas, auto-fit, gap, and when to reach for each layout model.

Modern Frontend
css
flexbox
grid

Flexbox is one-dimensional (a row or a column); Grid is two-dimensional (rows and columns). Rule of thumb: Flexbox for a streak of items or alignment, Grid for a full layout/matrix.

Flexbox Cheat Sheet

css
.flex-row {
  display: flex;
  flex-direction: row;            /* row | column | row-reverse | column-reverse */
  justify-content: flex-start;    /* main axis */
  align-items: stretch;           /* cross axis */
  gap: 1rem;                      /* spacing between items */
  flex-wrap: wrap;                /* nowrap | wrap | wrap-reverse */
}
Table
PropertyValuesEffect
justify-contentflex-start, center, flex-end, space-between, space-around, space-evenlyMain-axis alignment of the group
align-itemsstretch, flex-start, center, flex-end, baselineCross-axis alignment of each item
align-contentsame as justify + space-*Cross-axis alignment for wrapped lines
flex-grow0, 1, 2…Share leftover space
flex-shrink0, 1, 2…How much to shrink when tight
flex-basisauto, 200px, 30%Initial main size before grow/shrink
align-selfoverrides align-items per itemalign-self: center
orderintegerReorder items visually

Shortcut: flex: 1 = flex: 1 1 0%. flex: 0 0 auto = no grow, no shrink, natural size.

Grid Cheat Sheet

css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* three equal columns */
  grid-template-rows: auto 1fr auto;        /* header, content, footer */
  gap: 1rem;
  align-items: stretch;
  justify-items: stretch;
}
Table
PropertyExampleMeaning
grid-template-columnsrepeat(4, minmax(0, 1fr))Define column tracks
grid-template-rowsauto 1fr autoDefine row tracks
grid-template-areas"header header" "nav main"Name-based layout
grid-auto-rowsminmax(100px, auto)Size of implicit rows
grid-column1 / -1Span from line 1 to the last
grid-rowspan 2Span two rows
gap / row-gap / column-gap1remTrack spacing
justify-items / align-itemscenterAlign items inside their cell
place-itemscenterShorthand for both

Responsive Pattern: auto-fit / minmax

css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

This creates as many ≥240px columns as fit, then wraps — no media queries needed for card grids.

Grid Template Areas

css
.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.layout > header { grid-area: header; }
.layout > aside  { grid-area: sidebar; }
.layout > main   { grid-area: main; }
.layout > footer { grid-area: footer; }

Flex vs Grid — Decision Guide

Table
NeedUse
Align a few items in one lineFlexbox
Equal-width columns that wrapFlexbox with flex: 1 or Grid auto-fit
Full-page layout (header/sidebar/main/footer)Grid
Card grid that reflowsGrid repeat(auto-fit, minmax(...))
Center a single itemFlexbox justify-content/align-items: center or Grid place-items: center
Overlapping elementsGrid (items can share tracks)

Common Pitfalls

[!WARNING] justify-content on a flex container does nothing when the container is flex-wrap and items fill the line — align wrapped lines with align-content.

[!TIP] Use minmax(0, 1fr) instead of bare 1fr when grid items contain long content or embedded images, or they may overflow their track.

References

Related tools

Flexbox PlaygroundCSS Grid GeneratorCSS Gradient Generator