CSS

Lesson 04

Grid layout tracks

Use grid tracks to describe responsive columns instead of hand-balancing fixed widths.

Good Code

dashboard-grid.css
.dashboard-grid {
  /* Grid describes the responsive column rule in one place. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.dashboard-card {
  min-width: 0;
}

Bad Code

dashboard-grid.css
.dashboard-card {
  /* Floats and nth-child margins encode fragile row math manually. */
  float: left;
  width: 33.333%;
  margin-right: 24px;
}

.dashboard-card:nth-child(3n) {
  margin-right: 0;
}

Review Notes

What to review

Good Code

The good version describes the layout rule once: cards should create as many columns as fit, each with a sensible minimum width.

Bad Code

The bad version tries to simulate columns with floats, percentages, and positional exceptions, so adding a gap or changing the column count becomes a fragile rewrite.

Takeaways

  • Let grid define track rules with minmax and gaps instead of distributing width through floats or nth-child margins.