Flexbox and Grid, side by side, with recipes

Flexbox container properties

Set these on the element that has display: flex. Defaults are called out because most flex bugs are a default you forgot about.

Gotcha: justify-items does nothing in Flexbox. There is no such thing as per-item main-axis alignment - use an auto margin instead.

Grid container properties

Every alignment property in one matrix

The single most useful rule: in Grid, justify-* is always the inline (column) axis and align-* is always the block (row) axis. In Flexbox they swap meaning when flex-direction is column. Every place-* shorthand takes align first, justify second.

Alignment values and what they actually do

Copy-paste layout recipes

Eight layouts that cover most of what a real page needs. All of them are modern CSS with no floats, no clearfix, and no positioning hacks.

Dead center, both axes

/* Grid: shortest version that exists */
.center { display: grid; place-items: center; min-block-size: 100dvh; }

/* Flexbox equivalent */
.center { display: flex; justify-content: center; align-items: center; }

/* No container properties at all: auto margins on the child */
.center > * { margin: auto; }

Holy grail: header, sidebar, main, aside, footer

.shell {
  display: grid;
  min-block-size: 100dvh;
  gap: 1rem;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 14rem minmax(0, 1fr) 12rem;
  grid-template-areas:
    "head head  head"
    "nav  main  aside"
    "foot foot  foot";
}
.shell > header { grid-area: head; }
.shell > nav    { grid-area: nav; }
.shell > main   { grid-area: main; }
.shell > aside  { grid-area: aside; }
.shell > footer { grid-area: foot; }

@media (width < 60rem) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "nav" "main" "aside" "foot";
  }
}

The minmax(0, 1fr) on the main column is not decoration. Without it, a wide table or a long code block inside main pushes the whole layout sideways.

Sidebar that collapses without a media query

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.with-sidebar > .side { flex: 1 1 16rem; }   /* ideal width, may grow */
.with-sidebar > .body { flex: 999 1 60%; }   /* hogs space until 60% is impossible */

The huge grow factor on the body means the sidebar only wraps when the body can no longer hold its 60% basis. Container queries do this more explicitly, but this version works in one declaration.

Responsive card grid, zero breakpoints

.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.cards > .featured { grid-column: 1 / -1; }  /* one full-width hero card */

The min(18rem, 100%) wrapper is what stops the grid overflowing on a 320px phone, where a hard 18rem minimum would be wider than the viewport.

Sticky footer that stays down on short pages

body {
  min-block-size: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
/* header, main, footer in source order - nothing else needed */

Nav bar with a group pushed to the right

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav > .logo   { flex: none; }
.nav > .spacer { margin-inline-start: auto; }  /* everything after this goes right */

Auto margins beat space-between here because they work with any number of items on either side.

Media object: fixed avatar, fluid text

.media {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}
/* Long words in the text column now wrap instead of overflowing */

Full-bleed row inside a constrained article

.article {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [content-start] min(70ch, 100%) [content-end]
    minmax(1rem, 1fr) [full-end];
}
.article > *          { grid-column: content; }
.article > .full-bleed { grid-column: full; }

Because area names generate -start and -end lines, grid-column: content is shorthand for content-start / content-end.