2023-03-13 · CSS

Understand CSS Subgrid alignment

Let children share the tracks of their parent instead of hand-tuning every row.

Introduction

Subgrid solves the card layout problem that flexbox leaves behind. We build a gallery, a form, and a comment thread, then compare where subgrid beats nested grid.

The mental model

  • Start from the smallest version that could work, and make it observable.
  • Write down the trade-off you are accepting, not only the feature you are shipping.
  • Revisit the decision when the team grows; most choices in CSS have a shelf life.

A practical starting point

  1. Reproduce the situation on a scratch branch, next to a measurement you trust.
  2. Change one variable at a time, and keep the diff small enough to explain in one sentence.
  3. Keep the result, throw away the scaffolding.
Terminal window
git switch -c experiment/one-thing

Closing thoughts

None of this is doctrine. Treat it as a checklist you are allowed to disagree with — ideally with an experiment of your own that settles the argument.