Mastering CSS Grid – Building Two-Dimensional Layouts
Yesterday, I learned how Flexbox makes arranging elements in a single row or column simple and responsive.
Today, I explored CSS Grid, another powerful layout system that allows us to design web pages using both rows and columns simultaneously.
If Flexbox is great for arranging items in one direction, CSS Grid is perfect for creating complete page layouts.
Let's dive in.
What is CSS Grid?
CSS Grid is a two-dimensional layout system that allows developers to organize content into rows and columns.
Unlike Flexbox, which works on one axis at a time, Grid gives us complete control over both horizontal and vertical placement.
To use Grid, we first create a Grid Container.
.container{
display:grid;
}
Once display: grid is applied, all direct children become Grid Items.
Grid Container vs Grid Items
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Here,
.container→ Grid ContainerChild elements → Grid Items
Grid Template Columns
Defines how many columns the grid should have.
.container{
display:grid;
grid-template-columns:200px 200px 200px;
}
This creates three columns.
A more flexible approach:
grid-template-columns:1fr 1fr 1fr;
fr stands for Fraction Unit, which divides the available space equally.
Grid Template Rows
Defines the height of each row.
grid-template-rows:150px 150px;
Gap
Creates spacing between rows and columns.
.container{
gap:20px;
}
No need to use margins between items.
Repeat()
Instead of writing:
grid-template-columns:1fr 1fr 1fr 1fr;
We can write:
grid-template-columns:repeat(4,1fr);
Cleaner and easier to maintain.
Grid Column
Allows an item to span multiple columns.
.item{
grid-column:1/3;
}
The item stretches from column 1 to column 3.
Grid Row
Allows an item to span multiple rows.
.item{
grid-row:1/3;
}
Place Items
Aligns items both horizontally and vertically.
.container{
place-items:center;
}
Equivalent to:
justify-items:center;
align-items:center;
Grid Areas
One of Grid's most powerful features.
Example:
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
Each element is assigned an area name.
.header{
grid-area:header;
}
This makes complex layouts much easier to understand.
Auto-Fit & Minmax()
Used for responsive grids.
grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));
This automatically adjusts the number of columns based on screen size.
One of the most commonly used Grid patterns in modern web development.
Flexbox vs Grid
| Flexbox | CSS Grid |
|---|---|
| One-dimensional | Two-dimensional |
| Best for components | Best for full layouts |
| Navigation Bars | Dashboards |
| Cards | Gallery Layouts |
| Buttons | Complete Web Pages |
The two are not competitors—they complement each other.
Professional websites often use Grid for the page structure and Flexbox inside individual components.
Best Practices
✔ Use Grid for page layouts.
✔ Use Flexbox inside Grid items.
✔ Prefer repeat() for cleaner code.
✔ Use gap instead of margins.
✔ Learn auto-fit and minmax() for responsive layouts.
My Biggest Takeaway
Before today, I thought Flexbox could solve every layout problem.
Now I understand why CSS Grid exists.
Grid makes it much easier to design complete page layouts with rows and columns while keeping the code clean and organized.
The repeat(), fr, and auto-fit functions were especially interesting because they make layouts more flexible and responsive.
Learning CSS Grid feels like unlocking the final piece of modern CSS layout design.