CSS Layout Cookbook (Bit patterns)

CSS Layout patterns

Recipes for everyday layouts: sticky footers, cards, centering, split navs.

Sticky footer

Content pushes footer down when short:

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

Split navigation

Logo left, links right:

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Card grid

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

Breadcrumbs

.breadcrumbs li {
  display: inline;
}
.breadcrumbs li + li::before {
  content: " › ";
}

Pagination-only tweaks

Wrap in flex, align right via justify-content: flex-end.

Hero center

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

TL;DR

• Flex/grid recipes make 90% of layouts.
• auto-fit + minmax = responsive card grid.
• ::before/::after for breadcrumb separators.
• Sticky footer = min-height + flex column + main flex.