DEV Community

楊東霖
楊東霖

Posted on • Originally published at devplaybook.cc

CSS Grid Layout Master Guide: From Zero to Production in 2026

#css #webdev #frontend #design

CSS Grid Layout Master Guide: From Zero to Production in 2026

The Two-Dimensional Model

CSS Grid is a two-dimensional layout system. Flexbox is one-dimensional. Use Grid when you need to control both rows and columns simultaneously.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}
Enter fullscreen mode Exit fullscreen mode

Grid Template Areas 

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
Enter fullscreen mode Exit fullscreen mode

HTML:

<div class="page">
  <header class="header"></header>
  <aside class="sidebar"></aside>
  <main class="main"></main>
  <footer class="footer"></footer>
</div>
Enter fullscreen mode Exit fullscreen mode

The fr Unit

The fr unit means "fraction of available space."

/* Equal columns */
grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
grid-template-columns: 2fr 1fr 1fr;     /* 50% 25% 25% */
grid-template-columns: repeat(4, 1fr);   /* 4 equal */
Enter fullscreen mode Exit fullscreen mode

Auto-Placement

Grid automatically places items that don't have explicit positioning:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
Enter fullscreen mode Exit fullscreen mode

This creates a responsive grid with no media queries — cards automatically wrap as the viewport shrinks.

Named Lines 

.main {
  display: grid;
  grid-template-columns:
    [full-start] 1rem
    [content-start] minmax(0, 65ch) [content-end]
    1rem [full-end];
}

.full-bleed {
  grid-column: full-start / full-end;
}
Enter fullscreen mode Exit fullscreen mode

Common Patterns

Holy Grail Layout 

.holy-grail {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
  min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

Card Grid 

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
Enter fullscreen mode Exit fullscreen mode

Browser Support

CSS Grid has 97%+ global browser support. No prefixes needed in 2026. Ship it.

Level Up Your Dev Workflow

Found this useful? Explore DevPlaybook — cheat sheets, tool comparisons, and hands-on guides for modern developers.

🛒 Get the DevToolkit Starter Kit on Gumroad — 40+ browser-based dev tools, source code + deployment guide included.

Top comments (0)