CSSLayoutGrid

CSS Grid Demystified

Interactive grid playground — rows, columns, areas, and alignment made visual.

By Forhad15 min readBeginnerInteractive Demo

What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system — it handles both rows and columns at the same time. Unlike Flexbox which is one-dimensional, Grid lets you create complex layouts with precise control over both axes.

Key Concepts

  • grid-template-columns / rows — define the track sizes for columns and rows
  • gap — sets spacing between grid items
  • justify-items — aligns items horizontally within their grid cell
  • align-items — aligns items vertically within their grid cell
  • fr unit — a flexible fraction of available space

Interactive Grid Playground

Adjust the grid properties and see how items reflow instantly.

Columns (3)
Rows (3)
Gap (12px)
Cells (6)
justify-items
align-items
1
2
3
4
5
6
Generated CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, minmax(60px, 1fr));
  gap: 12px;
  justify-items: stretch;
  align-items: stretch;
}