Responsive Design with CSS Grid

01Getting started with Grid

To create a grid, set display: grid on the parent and define the columns. The fr unit shares the remaining space between columns:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

The gap property sets the space between rows and columns without adding space at the outer edge of the grid, so first and last items need no special margins.

02Responsive without media queries

Combining auto-fit and minmax() lets the browser decide the number of columns from the available width:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

Here every card is at least 260 pixels wide. On a large screen several columns appear and on a phone it becomes a single column automatically — without a single media query.

For real-world examples of such layouts, browse our portfolio.

03Layouts with grid-template-areas

For whole-page layouts, naming areas makes the code more readable and changing the layout at different widths very easy:

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "main   aside"
    "footer footer";
  grid-template-columns: 1fr 320px;
}

@media (max-width: 800px) {
  .page {
    grid-template-areas: "header" "main" "aside" "footer";
    grid-template-columns: 1fr;
  }
}

04Grid or Flexbox?

They are not rivals; they work side by side. A simple rule:

• Flexbox: one-dimensional layout (a row or a column), such as a nav bar or a group of buttons.
• Grid: two-dimensional layout controlling rows and columns together, such as a card grid or the whole page structure.

One more tip: subgrid, now supported in modern browsers, lets nested items follow the parent’s rows and columns so, for example, the titles and buttons of cards in the same row align exactly.

To animate between layout states read smooth animations with CSS and JavaScript; for reuse, component design principles help.

05Accessibility and content order

Grid lets you separate visual order from document order (with order or explicit placement), but keyboards and screen readers still follow DOM order. When the two disagree, the experience becomes confusing.

• Write the HTML in a logical content order first.
• Change visual order only when necessary and test with the keyboard.
• For right-to-left layouts, use logical properties such as margin-inline.

Find the full list in the web accessibility checklist and the MDN documentation.