Definition
A two-dimensional CSS layout system that defines rows and columns explicitly, placing items by line numbers, spans, or named template areas—ideal for full-page layouts and complex component grids.
Why It Matters
CSS Grid is the first true layout engine for the web, allowing for two-dimensional control that was previously impossible. It enables complex, responsive designs with cleaner markup and more intuitive spatial management.
Core Concepts
display: grid: Creates grid container.- Tracks:
grid-template-columns/rowswithfr,px,minmax(),repeat(). - Areas:
grid-template-areasassigns names to rectangular regions. - Placement:
grid-row,grid-column,grid-area, line numbers,span. - Gaps:
gap(row-gap, column-gap) between tracks. - Implicit Grid: Auto-created tracks for overflow items; controlled by
grid-auto-flow.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px auto;
gap: 10px;
}
.main-content {
grid-column: 1 / 3; /* Spans from line 1 to 3 */
}