CSSCSS GridLayoutResponsive Design

CSS Grid Mastery: From Basic Layouts to Complex Magazine Grids

CSS Grid is the most powerful layout tool in CSS. This guide covers named areas, subgrid, auto-placement, and real-world patterns including card grids, dashboards, and editorial layouts.

U

UIXplor Team

February 25, 2026 · 10 min read

✦

01Grid Fundamentals

CSS Grid creates a two-dimensional layout context:

css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1.5rem;
}

`1fr` means 'one fraction of available space'. Three `1fr` columns create a responsive equal-width three-column layout.

02Named Template Areas

Named areas make complex layouts readable:

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

03Auto-Fill vs Auto-Fit for Responsive Grids

The most powerful responsive grid needs zero media queries:

css
/* auto-fill: creates as many columns as fit */
.grid-fill { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* auto-fit: collapses empty tracks */
.grid-fit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

Use `auto-fill` when you want the grid to maintain column slots. Use `auto-fit` when you want items to stretch to fill the container.

04Subgrid for Aligned Card Layouts

Subgrid lets nested elements align to the parent grid:

css
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry; /* future */ 
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* inherit parent rows */
}
/* Now all card sections (image, title, body) align across cards */

Related UI Components

◈

Collections

All UI component collections

Back to Blog