โฑ๏ธ2 min read ยท 381 words
CSS Grid is the most powerful layout system in CSS. In 2026, browser support is 99%+ and CSS Grid is used for everything from page-level layouts to complex card grids and dashboards. This guide covers Grid from basics to advanced patterns.
๐ Table of Contents
Grid Basics
/* Enable grid */
.container {
display: grid;
/* 3 equal columns */
grid-template-columns: 1fr 1fr 1fr;
/* Or shorthand */
grid-template-columns: repeat(3, 1fr);
/* Rows */
grid-template-rows: auto 1fr auto;
/* Gap between cells */
gap: 1rem;
}<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>Grid Template Areas (Semantic Layout)
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: 1rem;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }Spanning Columns and Rows
.featured {
grid-column: 1 / 3; /* span 2 columns */
/* or: */
grid-column: span 2;
}
.hero {
grid-row: 1 / 3; /* span 2 rows */
}
.full-width {
grid-column: 1 / -1; /* span all columns */
}Auto-Fill and Auto-Fit (Responsive Grid)
/* Cards that auto-wrap: minimum 280px, fill available space */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
/* auto-fill: keeps empty column tracks
auto-fit: collapses empty tracks */
.card-grid-fit {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}Named Grid Lines
.layout {
display: grid;
grid-template-columns:
[full-start] 1rem
[content-start] 1fr
[content-end] 1rem
[full-end];
}
.bleed-full {
grid-column: full-start / full-end;
}
.content {
grid-column: content-start / content-end;
}Grid vs Flexbox: When to Use Which
- CSS Grid: Two-dimensional layouts (rows AND columns), page structure, dashboards, complex card layouts
- Flexbox: One-dimensional (row OR column), navigation bars, button groups, centering content
- Both together: Grid for page layout, Flexbox for items inside grid cells
Responsive Grid Without Media Queries
/* Works at any viewport width โ no breakpoints needed */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
gap: 1rem;
}Conclusion
CSS Grid is one of the most powerful additions to CSS. Use grid-template-areas for semantic page layout, repeat(auto-fill, minmax(...)) for responsive card grids, and named lines for complex editorial layouts. Combined with Flexbox, you can build any layout without a CSS framework.
๐ You might also like
๐ Share this article
โ๏ธ Leave a Comment