CSS Grid
What is CSS Grid?
CSS Grid Layout is a two-dimensional layout system — it handles both rows and columns simultaneously. While Flexbox is ideal for one-dimensional layouts (a row of buttons, a column of cards), Grid is purpose-built for complex, two-dimensional page layouts.
Think of Grid as drawing a table in CSS, then placing elements precisely within it.
Activating CSS Grid
Set display: grid on a container:
<div class="grid-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-container {
display: grid;
}
By itself, this just stacks items like a regular document. You need to define the structure.
Defining Columns: grid-template-columns
.grid-container {
display: grid;
grid-template-columns: 200px 200px 200px; /* three 200px columns */
}
The fr (fractional) unit divides the available space proportionally:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
grid-template-columns: 2fr 1fr; /* two columns, first is twice as wide */
grid-template-columns: 300px 1fr; /* fixed sidebar + flexible content */
}
The repeat() Function
Use repeat() to avoid repetition:
/* These two rules are identical */
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
Defining Rows: grid-template-rows
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 200px; /* first row 100px, second 200px */
}
gap
The gap property adds space between grid tracks (rows and columns):
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px; /* same gap between rows and columns */
gap: 16px 32px; /* row-gap column-gap */
}
Placing Items: grid-column and grid-row
Grid lines are numbered from 1. You can place items across multiple cells:
/* Place item from column line 1 to column line 3 (spans 2 columns) */
.featured {
grid-column: 1 / 3;
}
/* Span across a specific number of cells */
.hero {
grid-column: span 2;
grid-row: span 2;
}
Named Template Areas
The most readable way to build complex layouts is with grid-template-areas:
<div class="page-layout">
<header class="header">Header</header>
<aside class="sidebar">Sidebar</aside>
<main class="main">Main Content</main>
<footer class="footer">Footer</footer>
</div>
.page-layout {
display: grid;
grid-template-columns: 260px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
gap: 0;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
This creates a classic dashboard layout: full-width header, left sidebar, content area, and full-width footer. The names in the template become a visual map of the layout.
auto-fill and auto-fit with minmax
One of the most powerful CSS Grid features is a responsive pattern that requires zero media queries:
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
This means: "create as many columns as will fit, each at least 280px wide." As the viewport narrows, columns automatically collapse from three to two to one. No breakpoints needed.
A Complete Grid Example
<div class="dashboard">
<header class="dash-header">Dashboard</header>
<aside class="dash-sidebar">Navigation</aside>
<main class="dash-content">
<div class="stat-grid">
<div class="stat">1,240 Students</div>
<div class="stat">48 Lessons</div>
<div class="stat">92% Completion</div>
<div class="stat">4.9 Rating</div>
</div>
</main>
</div>
.dashboard {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"header header"
"sidebar content";
height: 100vh;
}
.dash-header { grid-area: header; background: #0F1C3A; color: white; padding: 0 24px; display: flex; align-items: center; }
.dash-sidebar { grid-area: sidebar; background: #F3F4F6; padding: 24px; }
.dash-content { grid-area: content; padding: 24px; overflow-y: auto; }
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.stat {
background: white;
border-radius: 12px;
padding: 24px;
font-weight: 700;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
Flexbox vs Grid: When to Use Which
| Use Flexbox | Use Grid |
|---|---|
| One-dimensional layout (row or column) | Two-dimensional layout (rows and columns) |
| Navigation bars, button groups | Page-level layout, dashboards |
| When content drives the size | When the designer drives the size |
| Distributing space among items | Placing items at precise coordinates |
In practice, you will use both together: Grid for the page skeleton, Flexbox inside each grid area.
Practice Exercise
Build a blog layout with CSS Grid:
- Create a two-column grid with a fixed
280pxsidebar and a flexible main column - Use
grid-template-areasto define header, sidebar, content, and footer zones - Create an inner article grid using
repeat(auto-fill, minmax(260px, 1fr)) - Add a
gapof24pxbetween grid items
Try it yourself
Key Takeaways
- CSS Grid is a two-dimensional layout system that handles both rows and columns at once
- grid-template-columns and grid-template-rows define the grid structure
- The fr unit distributes available space proportionally among columns or rows
- grid-template-areas provides a named, visual map of the layout that is easy to read
- repeat(auto-fill, minmax(280px, 1fr)) creates a responsive grid with no media queries
- Use Grid for page-level layouts and Flexbox for component-level layouts inside grid areas
Quick Quiz
1.What does the 'fr' unit represent in CSS Grid?
2.What does 'grid-column: 1 / 3' mean?
3.What does this declaration do: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))?
4.When should you prefer CSS Grid over Flexbox?
Ready to go further?
CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.
Join CareerEx