Table of Contents
CSS Grid - Two-Dimensional Layout Power
CSS Grid is a powerful layout system for creating two-dimensional layouts (rows and columns at the same time). While Flexbox is great for one-dimensional layouts (rows or columns), Grid gives you precise control over both dimensions simultaneously.
Grid is perfect for:
- Dashboards - Multiple widgets arranged in rows and columns
- Magazine layouts - Articles, images, and sidebars in complex arrangements
- Photo galleries - Images in organized grids
- Admin panels - Structured data layouts
- Responsive websites - Layouts that change with screen size
Grid vs Flexbox
- Flexbox: One-dimensional (rows OR columns)
- Grid: Two-dimensional (rows AND columns simultaneously)
Creating a Grid Container
Start by making an element a grid container:
.grid {
display: grid; /* Activates CSS Grid */
}Defining Columns and Rows
grid-template-columns (Define Columns)
Specify the width and number of columns:
.grid {
display: grid;
grid-template-columns: 200px 300px 200px; /* Three columns with fixed widths */
}grid-template-rows (Define Rows)
Specify the height and number of rows:
.grid {
display: grid;
grid-template-rows: 100px 200px 100px; /* Three rows with fixed heights */
}Real-World Example 1: Simple Dashboard
<div class="dashboard">
<div class="card">Widget 1</div>
<div class="card">Widget 2</div>
<div class="card">Widget 3</div>
<div class="card">Widget 4</div>
</div>
<style>
.dashboard {
display: grid;
grid-template-columns: 1fr 1fr; /* Two equal columns */
gap: 20px;
}
.card {
background-color: white;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
</style>The fr Unit (Fraction)
The fr unit divides available space into equal fractions:
/* Three equal columns */
grid-template-columns: 1fr 1fr 1fr;
/* Left column 200px, middle and right split remaining space equally */
grid-template-columns: 200px 1fr 1fr;
/* Three columns: 1:2:1 ratio */
grid-template-columns: 1fr 2fr 1fr;auto-fit (Responsive Grid)
Create responsive grids that adjust to screen size without media queries:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
/* This creates as many columns as fit, with min 250px and max 1fr */Real-World Example 2: Responsive Photo Gallery
<div class="gallery">
<img src="photo1.jpg" alt="Photo 1">
<img src="photo2.jpg" alt="Photo 2">
<img src="photo3.jpg" alt="Photo 3">
<img src="photo4.jpg" alt="Photo 4">
<img src="photo5.jpg" alt="Photo 5">
<img src="photo6.jpg" alt="Photo 6">
</div>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 8px;
object-fit: cover;
}
</style>grid-template-areas (Named Regions)
Create a visual layout using named areas:
.layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 20px;
}
header {
grid-area: header;
}
aside {
grid-area: sidebar;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}Real-World Example 3: Website Layout with Named Areas
<div class="page">
<header>Header Content</header>
<aside>Sidebar</aside>
<main>Main Content</main>
<footer>Footer Content</footer>
</div>
<style>
.page {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 20px;
min-height: 100vh;
}
header {
grid-area: header;
background-color: #333;
color: white;
padding: 20px;
}
aside {
grid-area: sidebar;
background-color: #f5f5f5;
padding: 20px;
}
main {
grid-area: main;
padding: 20px;
}
footer {
grid-area: footer;
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
/* Mobile: Single column */
@media (max-width: 768px) {
.page {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"sidebar"
"main"
"footer";
}
}
</style>Spanning Grid Items
grid-column (Span Multiple Columns)
.featured {
grid-column: span 2; /* Take up 2 columns */
}grid-row (Span Multiple Rows)
.featured {
grid-row: span 2; /* Take up 2 rows */
}Real-World Example 4: Magazine Layout
<div class="magazine">
<article class="featured">
<h2>Featured Article</h2>
<p>Large article spanning multiple columns...</p>
</article>
<article>
<h3>Article 2</h3>
</article>
<article>
<h3>Article 3</h3>
</article>
<article>
<h3>Article 4</h3>
</article>
</div>
<style>
.magazine {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.featured {
grid-column: span 2; /* Featured article spans both columns */
background-color: #f5f5f5;
padding: 20px;
}
article {
background-color: white;
padding: 20px;
border: 1px solid #ddd;
}
</style>Gap (Space Between Items)
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px; /* 20px space between all items */
column-gap: 15px; /* Different space for columns */
row-gap: 25px; /* Different space for rows */
}Alignment in Grid
justify-items (Horizontal Alignment)
.grid {
justify-items: center; /* Center items horizontally within their cells */
}align-items (Vertical Alignment)
.grid {
align-items: center; /* Center items vertically within their cells */
}place-items (Both at Once)
.grid {
place-items: center; /* Centers both horizontally and vertically */
}When to Use Grid vs Flexbox
- Use Flexbox: Navigation bars, button groups, single-row/column layouts
- Use Grid: Dashboards, page layouts, two-dimensional arrangements
- Combine Both: Grid for overall layout, Flexbox for components within grid cells
Summary
You now understand:
- How CSS Grid creates two-dimensional layouts
- grid-template-columns and grid-template-rows for defining structure
- The fr unit for flexible sizing
- auto-fit for responsive grids without media queries
- Named areas for visual, readable layouts
- Real-world patterns: dashboards, galleries, magazine layouts
Grid and Flexbox are the modern tools for CSS layouts. With these two, you can create almost any design. Next, we'll explore transforms and transitions for animations.