01
1. What Is CSS Grid?
CSS Grid Layoutis the browser's native 2-dimensional layout engine. It enables developers to divide a webpage into structured columns and rows, and place content into precise geometric coordinate cells.
02
2. The Core Mental Model: Flexbox (1D) vs CSS Grid (2D)
1-Dimensional
Flexbox (Content-First)
Works in a single direction (Row OR Column). Best for micro-components: navbars, button groups, icon tags, and linear flows.
2-Dimensional
CSS Grid (Layout-First)
Controls rows AND columns simultaneously. Best for macro-structure: dashboards, multi-card galleries, and full-page skeletons.
03
3. Grid Container and Grid Items
Setting display: grid on a parent creates a Grid Container. All immediate child elements automatically become Grid Items placed inside the generated track matrix.
04
4. Creating a Grid: display: grid
.dashboard {
display: grid;
grid-template-columns: 240px 1fr 300px;
grid-template-rows: 80px 1fr 60px;
gap: 20px;
}
display: grid;
grid-template-columns: 240px 1fr 300px;
grid-template-rows: 80px 1fr 60px;
gap: 20px;
}
05
5. Defining Columns, Rows & The fr Unit
The fr (fractional) unit represents a share of the leftover unoccupied container space:
/* 3 equal columns: each gets 1/3 (33.3%) of available width */
grid-template-columns: 1fr 1fr 1fr;
/* Sidebar 250px, Main Content takes remaining space */
grid-template-columns: 250px 1fr;
grid-template-columns: 1fr 1fr 1fr;
/* Sidebar 250px, Main Content takes remaining space */
grid-template-columns: 250px 1fr;
06
6. Gap Between Grid Items
gap: 20px; /* 20px rows and columns */
row-gap: 24px;
column-gap: 16px;
row-gap: 24px;
column-gap: 16px;
07
7. Placing Grid Items with Grid Lines
Grid coordinates count Grid Lines (the perimeter edges and dividers), starting from 1 at the top/left edge:
/* Line 1 ➔ Line 2 ➔ Line 3 ➔ Line 4 */
.hero-card {
grid-column: 1 / 3; /* Starts at line 1, ends at line 3 (spans 2 columns) */
grid-row: 1 / 2;
}
.hero-card {
grid-column: 1 / 3; /* Starts at line 1, ends at line 3 (spans 2 columns) */
grid-row: 1 / 2;
}
08
8. Spanning Columns and Rows (span syntax)
/* Span 2 columns from wherever it naturally starts */
.wide-banner {
grid-column: span 2;
}
/* Span full width across a 12-column grid */
.full-width {
grid-column: 1 / -1; /* -1 represents the last grid line! */
}
.wide-banner {
grid-column: span 2;
}
/* Span full width across a 12-column grid */
.full-width {
grid-column: 1 / -1; /* -1 represents the last grid line! */
}
09
9. The repeat() Helper Function
/* Instead of writing: 1fr 1fr 1fr 1fr 1fr 1fr */
grid-template-columns: repeat(6, 1fr);
/* 12-column desktop grid */
grid-template-columns: repeat(12, 1fr);
grid-template-columns: repeat(6, 1fr);
/* 12-column desktop grid */
grid-template-columns: repeat(12, 1fr);
10
10. Responsive Grids with auto-fit & minmax()
The holy grail of responsive design: No media queries needed!
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
✨ How it works:The browser automatically packs as many columns as will fit at >= 260px. On wide desktop monitors it renders 4 columns, on tablets 2 columns, and on phones 1 column automatically!
11
11. Grid Alignment Properties
| Property | Axis | What It Aligns |
|---|---|---|
justify-items | Horizontal (Inline) | Aligns items inside their individual cells (start, center, stretch) |
align-items | Vertical (Block) | Aligns items vertically inside their cells (start, center, stretch) |
justify-content | Horizontal | Aligns the ENTIRE grid track matrix inside container |
align-content | Vertical | Aligns the entire grid track matrix vertically |
12
12. 4 Real-World Grid Layout Patterns
1. Responsive Card Grid
grid-template-columns:
repeat(auto-fit, minmax(240px, 1fr));
repeat(auto-fit, minmax(240px, 1fr));
2. Sticky Sidebar + Main
grid-template-columns: 260px 1fr;
align-items: start;
align-items: start;
3. Holy Grail Layout
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-rows: auto 1fr auto;
4. Dashboard Grid
grid-template-columns: repeat(4, 1fr);
.stat-card { grid-column: span 2; }
.stat-card { grid-column: span 2; }
13
13. When to Use Grid vs Flexbox
- Use Grid when: You are defining the 2D skeleton of a page (Header + Sidebar + Content + Footer), or when card columns and rows must strictly align in a uniform grid.
- Use Flexbox when: You are aligning items in 1 dimension (navbar logo + search bar + profile button, tag chips, button groups).
14
14. Common CSS Grid Mistakes
- Confusing Grid Lines with Columns: A 3-column grid has 4 grid lines (1, 2, 3, 4).
- Not using
minmax(0, 1fr)for overflow protection: By default1frcan blow out if preformatted text or wide images exist. Useminmax(0, 1fr)to allow items to shrink below content size. - Overcomplicating simple 1D lists: Don't use Grid for a simple horizontal button row—use Flexbox!
15
15. Practical Example: Modern Dashboard Layout
.dashboard-layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 70px 1fr 50px;
min-height: 100vh;
gap: 16px;
}
.header { grid-column: 1 / -1; }
.sidebar { grid-row: 2 / 3; }
.main { grid-row: 2 / 3; }
.footer { grid-column: 1 / -1; }
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 70px 1fr 50px;
min-height: 100vh;
gap: 16px;
}
.header { grid-column: 1 / -1; }
.sidebar { grid-row: 2 / 3; }
.main { grid-row: 2 / 3; }
.footer { grid-column: 1 / -1; }
16
16. CSS Grid Best Practices Summary
- Embrace
repeat(auto-fit, minmax(250px, 1fr))for mobile-responsive card listings. - Use
grid-column: 1 / -1to make headers and hero banners seamlessly span all available columns. - Combine CSS Grid for page skeletons and Flexbox for internal component widgets!