Modern CSS Layout Cheatsheet

Flexbox or Grid?#

Use Flexbox when content decides the size of items along one axis (toolbars, nav bars, button groups). Use Grid when the layout decides the size of items in two dimensions (cards, dashboards, page shells).

Responsive grids without media queries#

auto-fit with minmax() creates as many columns as fit, each at least the minimum width. Wrapping the minimum in min() keeps a single column from overflowing on narrow screens.

1.cards {2  display: grid;3  gap: 1.5rem;4  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));5}

Centering, the reliable way#

1/* Both axes, any content */2.center {3  display: grid;4  place-items: center;5}67/* Constrained, centered page content */8.container {9  width: min(72rem, 100% - 2rem);10  margin-inline: auto;11}

Fluid type and spacing with clamp()#

clamp(min, preferred, max) scales a value with the viewport while respecting limits. Mixing rem into the preferred value keeps text zoomable for accessibility.

1h1 {2  font-size: clamp(2rem, 1.2rem + 3vw, 4rem);3}45.section {6  padding-block: clamp(3rem, 8vw, 7rem);7}

Container queries for reusable components#

Media queries react to the viewport; container queries react to the space a component actually has. That makes the same card work in a sidebar and in the main column.

1.card-wrapper {2  container-type: inline-size;3}45@container (min-width: 32rem) {6  .card {7    display: grid;8    grid-template-columns: 12rem 1fr;9  }10}