CSS Flexbox and Grid Cheat Sheet

Flex containers and items, grid tracks, placement and template areas, centering, and common layout patterns.

Updated October 24, 2026

Flexbox container#

CSS

.row {
  display: flex;
  flex-direction: row;          /* row | column | row-reverse | column-reverse */
  justify-content: space-between; /* main axis: flex-start | center | flex-end | space-between | space-around | space-evenly */
  align-items: center;          /* cross axis: stretch | flex-start | center | flex-end | baseline */
  flex-wrap: wrap;              /* allow new lines */
  gap: 12px;                    /* space between items */
}

justify-content works along the main axis (horizontal for rows); align-items along the cross axis.
With flex-direction: column, the axes swap.
align-content spaces wrapped lines.

Flex items#

Declaration	Effect
`flex: 1`	Grow and shrink equally from zero (`1 1 0%`)
`flex: auto`	Grow and shrink from content size
`flex: none`	Keep natural size
`flex: 0 0 240px`	Fixed 240px sidebar
`flex: 1 1 200px`	Cards that start at 200px, then flex
`min-width: 0`	Let an item shrink below its content (long text, code)
`margin-left: auto`	Push an item (and those after it) to the end
`align-self: flex-end`	Override alignment for one item
`order: -1`	Visual order only (keep HTML order logical)

Grid container#

CSS

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;              /* fixed + fractions */
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));  /* responsive, no media queries */
  grid-auto-rows: minmax(100px, auto);
  gap: 16px;                                          /* row-gap and column-gap */
  place-items: center;                                /* align + justify items */
}

Placing grid items#

CSS

.wide   { grid-column: span 2; }
.tall   { grid-row: span 2; }
.banner { grid-column: 1 / -1; }      /* full width: first to last line */
.box    { grid-column: 2 / 4; grid-row: 1; }

Template areas#

CSS

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  min-height: 100dvh;
}
header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
footer { grid-area: footer; }

@media (max-width: 700px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main" "nav" "footer";
  }
}

Subgrid lines up nested content with the parent grid: grid-template-rows: subgrid; on an item that spans rows.

Centering#

Goal	CSS
Inline content	Parent: `text-align: center`
Block with a width	`margin-inline: auto`
Anything, both ways	Parent: `display: grid; place-items: center`
A row of items	Parent: `display: flex; justify-content: center; align-items: center`
Overlay	`position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)`

Common layouts#

CSS

/* Sticky footer */
body { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }

/* Navbar */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* Centered content column */
.container { width: min(100% - 2rem, 1100px); margin-inline: auto; }

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

/* Media object */
.media { display: flex; gap: 1rem; align-items: flex-start; }
.media img { flex: none; width: 64px; }

Flexbox or Grid?#

Flexbox	Grid
One dimension: a row or a column	Two dimensions: rows and columns
Content decides sizes	Layout decides tracks
Navbars, toolbars, button groups, centering	Page layouts, galleries, dashboards, forms in columns

Want the full explanations? Go to the Learn CSS course →