CSS Grid Explainer | The School of Code

Settings

Appearance

Choose a typography theme that suits your style

Back to Explainers

CSS Grid Explainer

Experiment with CSS Grid properties and see how they affect layout in real-time. Use the controls on the left to change properties and watch the preview update instantly.

Grid Properties

(horizontal within cell)
(vertical within cell)
(grid horizontal)
(grid vertical)

Preview

1
2
3
4
5
6

Generated CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}

Generated CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}

About CSS Grid

CSS Grid is a two-dimensional layout system that lets you control both rows and columns simultaneously. It's perfect for creating complex layouts like dashboards, galleries, and page structures that were previously difficult to achieve with CSS.

📐 Two-Dimensional Layout

Unlike Flexbox which is one-dimensional, Grid works in both directions at once. Use grid-template-columns and grid-template-rows to define your grid structure.

📏 The fr Unit

The fr unit represents a fraction of available space. 1fr 2fr 1fr creates three columns where the middle one is twice as wide as the others.

🎯 Alignment Properties

justify-items and align-items control items within their cells, while justify-content and align-content control the entire grid within its container.