CSS Grid Layout

by

Summary

This postmortem analyzes a common CSS Grid issue: a grid child unexpectedly grows in height when content is added, even when the developer sets a fixed height or uses overflow: hidden. This behavior is normal for CSS Grid, but it often surprises engineers who expect the grid to enforce strict sizing.

Root Cause

The root cause is that CSS Grid tracks expand to fit their content unless explicitly constrained. Even if you set a height on the child, the grid row itself may stretch to accommodate the content.

Key contributors:

  • Grid rows default to auto, meaning row height = tallest content in that row.
  • A child with fixed height does not prevent the grid track from expanding.
  • overflow: hidden hides overflow inside the element, but does not stop the grid track from growing.
  • Content inside the child (text, images, flex children) may have minimum content size rules that force expansion.

Why This Happens in Real Systems

Real-world CSS layouts often behave this way because:

  • Grid is designed for content-driven sizing unless told otherwise.
  • Many UI components (buttons, text blocks, images) have intrinsic minimum sizes.
  • Developers assume grid behaves like flexbox, but grid tracks are more rigid about content sizing.
  • Browsers enforce minimum content contribution to avoid unreadable or collapsed content.

Real-World Impact

This issue can cause:

  • Unexpected layout shifts when dynamic content loads.
  • Broken card layouts where one card becomes taller than others.
  • Overflowing containers even when overflow rules are applied.
  • Inconsistent UI behavior across browsers due to different intrinsic sizing algorithms.

Example or Code (if necessary and relevant)

Below is a minimal example showing the problem and the fix.

Problematic Layout

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.card {
  height: 200px;
  overflow: hidden;
  background: #eee;
}

Corrected Layout (explicit row sizing)

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 200px; /* or minmax(0, 1fr) */
}

.card {
  overflow: hidden;
}

How Senior Engineers Fix It

Experienced engineers know that you must constrain the grid track, not just the child. Common fixes include:

  • Setting explicit row sizes:
    • grid-auto-rows: 200px
    • grid-template-rows: repeat(auto-fill, 200px)
  • Allowing rows to shrink with:
    • minmax(0, 1fr)
  • Forcing children to ignore intrinsic minimums:
    • min-height: 0
    • min-width: 0
  • Wrapping content in an inner container that handles overflow cleanly
  • Using flexbox inside the grid child to control internal layout

Key takeaway: The grid track must be constrained, not just the element.

Why Juniors Miss It

Junior developers often miss this because:

  • They assume height on the child controls the row, which is incorrect.
  • They don’t yet understand intrinsic sizing rules (min-content, max-content).
  • They expect grid to behave like flexbox, where children more directly control size.
  • They rely on overflow: hidden as a universal fix, not realizing it does not affect track sizing.
  • They rarely inspect grid track sizes in browser dev tools.

Understanding how CSS Grid calculates track sizes is a major step toward mastering modern layout systems.

Leave a Comment