Responsive CSS Grid Layouts

What is CSS Grid?

CSS Grid Layout is a two‑dimensional system that lets you create complex responsive layouts with rows and columns. Unlike Flexbox, which works in a single dimension, Grid can handle both axes at once.

Basic Grid Syntax

/* container */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* items */
.grid > div {
  background:#0066ff;
  color:#fff;
  padding:1rem;
}

Responsive Example

1

2

3

4

5

6

Columns: Gap (px):

Advanced Features

grid-template-areas – define named areas.
minmax() – set flexible min and max track sizes.
auto-fit / auto-fill – create fluid columns.
order – rearrange items without changing HTML.