CSS Grid Layout

CSS Grid splits a page into rows and columns like a spreadsheet. It is perfect for full page layouts, dashboards, and card grids.

Grid Introduction

CSS Grid splits a page into rows and columns like a spreadsheet. It is perfect for full page layouts, dashboards, and card grids.

Real-life example: Grid is like a chess board or Excel sheet — fixed rows and columns where each piece (element) can sit in one or many cells.

Page grid areas

Grid Container

On the parent: display: grid, grid-template-columns, grid-template-rows, gap, and grid-template-areas for named regions.

Real-life example: grid-template-areas is like labeling rooms on a house map — header, sidebar, main, footer.

Grid container

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
  gap: 1rem;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Grid Items

Children can span multiple columns or rows with grid-column and grid-row. place-items centers content inside a cell.

Real-life example: grid-column: span 2 is like one shop taking two stalls in a market row.

Spanning cells

.wide-card {
  grid-column: span 2;
}

.tall-box {
  grid-row: span 2;
}

.center-cell {
  display: grid;
  place-items: center;
}

12-Column Layout

Many design systems use 12 columns. Each section spans some columns — flexible and familiar to designers.

Real-life example: A 12-column grid is like cutting a roti into 12 equal slices — a hero might use all 12, a card might use 4.

12-column grid

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-12 { grid-column: span 12; }

@media (max-width: 768px) {
  .span-4, .span-6 {
    grid-column: span 12;
  }
}

CSS @supports

@supports checks if the browser understands a CSS feature before applying rules. Use it for progressive enhancement — base layout works everywhere, extras where supported.

Real-life example: @supports is like asking does this kitchen have an oven? before baking — otherwise use the stove.

Use Grid for page layout (header, sidebar, footer). Use Flexbox for one-dimensional rows like navbars and toolbars. Many sites combine both.

@supports example

.cards {
  display: block;
}

@supports (display: grid) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
  }
}