CSS Layout Without the Hacks

A lot of “clever” CSS from older codebases exists because Flexbox and Grid were not widely usable yet. Today you can drop most of those workarounds.

Start with Grid for the page, Flex for the row

Use Grid when you care about both axes—page shells, card grids, split heroes. Use Flex when you care about one axis—toolbars, tag lists, button groups.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.25rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

gap alone removes a surprising amount of margin math.

Intrinsic sizing beats magic numbers

Prefer minmax, clamp, and container-aware units over fixed pixel widths:

.measure {
  max-width: 65ch;
}

.hero-title {
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
}

Your layout adapts without a pile of media-query overrides.

Alignment without absolute positioning

Sticky footers, equal-height columns, and centered stacks are one-liners now:

.page {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.center {
  display: grid;
  place-items: center;
}

Reserve absolute positioning for overlays and decorative layers—not core structure.

Wrap-up

When a layout fight starts, ask: is this a Grid problem or a Flex problem? Choosing the right primitive usually deletes the hack entirely.