CSS Grid Layout: Core Concepts, Example, Limits and Pitfalls

Why use CSS Grid Layout

CSS Grid Layout provides a two‑dimensional system for arranging items in rows and columns without relying on floats or positioning hacks. It lets you define explicit tracks and place items by line numbers or named areas.

Basic configuration

.container {
  display: grid;
  /* three equal‑width columns, 1rem gap between tracks */
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Item A spans the full width of the first row */
.item-a {
  grid-column: 1 / 4; /* start at line 1, end before line 4 */
  grid-row: 1;
}

/* Item B occupies the first column, rows 2‑4 */
.item-b {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
}

/* Item C fills the remaining space (columns 2‑4, rows 2‑4) */
.item-c {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

The container declares a grid with three flexible columns. Items are placed by specifying the start and end grid lines for columns and rows. Line numbers begin at 1, so the first column is between lines 1 and 2.

Limits and browser support

• Internet Explorer 11 and earlier do not understand display: grid.
• The subgrid feature is only available in recent Firefox and Safari releases.
• Deeply nested grids can cause layout recalculation overhead; keep nesting shallow when performance matters.
• Because line numbers start at 1, developers accustomed to zero‑based indexing may miscount tracks.

Common mistakes

1. Forgetting to set display: grid on the parent, which leaves items in normal flow.
2. Combining grid-auto-flow with manual placement; auto‑placed items may appear in unexpected tracks.
3. Using fractional units (fr) together with a fixed pixel gap can cause the grid to overflow its container when the sum of fr tracks exceeds the available space.
4. Assuming alignment properties like justify-items inherit automatically; they must be set on the container or overridden on items.

Practical verification

Open the page in a modern browser, right‑click the grid container and choose Inspect → Layout panel to see the grid overlay showing lines and gaps. Resize the viewport or adjust the gap or fr values and confirm that items reflow according to the defined tracks while explicit placement (grid-column/grid-row) overrides auto‑placement as expected.