CSS Layout Systems

The "Flexbox vs Grid" debate is a false dichotomy. They solve different problems and work together. Understanding when to use each is what interviewers look for.

Flexbox: One-Dimensional Layout

Flexbox distributes space along a single axis — either a row or a column, not both simultaneously.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

Key Flexbox Mental Model

Flex items are sized based on their content and the available space. The algorithm:

1. Calculate the preferred size of each item (content, width/height, flex-basis)
2. Distribute remaining space according to flex-grow
3. Shrink items if they overflow, according to flex-shrink

.sidebar { flex: 0 0 250px; } /* fixed: won't grow or shrink */
.content { flex: 1 1 0; }     /* fluid: takes remaining space */

flex Shorthand Decoded

Grid: Two-Dimensional Layout

Grid controls placement across rows and columns simultaneously. It's layout-first — you define the grid, then place items.

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header  header"
    "sidebar content content"
    "sidebar footer  footer";
  gap: 1rem;
  min-height: 100vh;
}
 
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

Responsive Grids Without Media Queries

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

auto-fill creates as many columns as fit. minmax(300px, 1fr) ensures cards are at least 300px but grow to fill space. This is a one-line responsive layout.

When to Use Which

Rule of thumb: If you're arranging items along one axis, use Flexbox. If you need to control both rows and columns, use Grid.

Common Layout Patterns

Holy Grail Layout

body {
  display: grid;
  grid-template: auto 1fr auto / 200px 1fr 200px;
  min-height: 100vh;
}
header { grid-column: 1 / -1; }
footer { grid-column: 1 / -1; }

Sticky Footer

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

The 1fr on the main content row pushes the footer down, even when content is short.

Aspect Ratio Cards

.card {
  aspect-ratio: 16 / 9;
  container-type: inline-size;
}
 
@container (min-width: 400px) {
  .card-title { font-size: 1.5rem; }
}

The Gotchas

• gap in Flexbox — fully supported now, but margin hacks still appear in legacy codebases
• Grid item overflow — minmax(0, 1fr) prevents grid items from overflowing when content is wider than the track
• auto vs 1fr — auto sizes to content, 1fr distributes remaining space. They behave very differently in grid layouts
• Flexbox min-width default — flex items have min-width: auto by default, which can prevent shrinking. Fix with min-width: 0

Interview Signal

Demonstrate that you think about layout structurally: name the pattern first ("this is a holy grail layout"), then choose the tool. Interviewers want to see you reason about why Flexbox or Grid, not just that you can write the CSS.