CSS Grid Layout Explained

What is CSS Grid?

CSS Grid is a two-dimensional layout system — it controls rows AND columns at once, ideal for full page layouts and complex designs.

Basic Grid

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
  gap: 16px;
}

The fr Unit & repeat()

grid-template-columns: repeat(3, 1fr);     /* 3 equal */
grid-template-columns: 200px 1fr;          /* fixed + flexible */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* responsive — auto-wrapping columns */

Placing Items

.header {
  grid-column: 1 / -1;   /* span all columns */
}
.sidebar {
  grid-row: 2 / 4;       /* span rows 2 to 4 */
}

Named Areas

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header { grid-area: header; }

FAQs

Grid vs Flexbox?

Grid for 2D page layouts, Flexbox for 1D component alignment. They work great together. More in our CSS guides.

Is Grid responsive?

Yes — auto-fit + minmax() create responsive grids with no media queries.