Table of Contents
- What is CSS Grid?
- CSS Grid vs Flexbox
- Basic Terminology: Grid Container, Grid Items, Lines, Tracks
- Defining a Grid with
display: grid - Creating Columns and Rows with
grid-template-columns&grid-template-rows - Placing Items in the Grid
- Explicit vs Implicit Grids
- Benefits of Using Grid for Layouts
- Summary and What’s Next
1. What is CSS Grid?
CSS Grid Layout is a two-dimensional layout system designed specifically for the web. While Flexbox excels at laying items out in a single direction—either row or column—Grid gives you control over both rows and columns simultaneously.
Introduced in modern browsers around 2017, CSS Grid is now fully supported and allows for complex, responsive layouts with minimal code. It fundamentally changes how we approach layout construction in CSS.
2. CSS Grid vs Flexbox
| Feature | Flexbox | Grid |
|---|---|---|
| Layout Direction | One-dimensional (row or col) | Two-dimensional (row and col) |
| Alignment | Easier along single axis | Powerful for full-page layouts |
| Use Case | Components | Page or section layouts |
| Responsiveness | Great | Excellent |
Flexbox is ideal for distributing items along a single axis, whereas CSS Grid is built for structured, grid-based layouts, such as dashboards, galleries, or multi-column sections.
3. Basic Terminology
Before we dive in, let’s learn some essential grid terms:
- Grid Container: The parent element with
display: grid. - Grid Items: The direct children of a grid container.
- Grid Lines: The lines dividing the grid (both vertical and horizontal).
- Grid Tracks: The spaces between two lines (rows or columns).
- Grid Cells: The individual spaces where items can be placed.
- Grid Areas: A collection of one or more grid cells.
4. Defining a Grid with display: grid
The first step to using Grid is to turn a container into a grid.
.container {
display: grid;
}
This will activate grid layout mode. Now we can define the structure.
5. Creating Columns and Rows
You define the number and size of rows and columns using:
.container {
display: grid;
grid-template-columns: 200px 200px 200px; /* 3 columns */
grid-template-rows: 100px 100px; /* 2 rows */
}
Or using fractional units:
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* relative widths */
}
Example:
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
This creates a two-column layout with equal-width columns and 10px spacing.
6. Placing Items in the Grid
Grid items automatically flow into rows, but you can position them explicitly:
.item {
grid-column: 1 / 3; /* spans from line 1 to line 3 */
grid-row: 2 / 3;
}
You can also use grid-area for named sections or span multiple rows/columns.
7. Explicit vs Implicit Grids
Explicit Grid: You define it manually with grid-template-rows and grid-template-columns.
Implicit Grid: If more items exist than defined spaces, the browser creates extra rows/columns automatically.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
Add 5 items, and the 3rd row will be auto-generated. You can control this behavior with grid-auto-rows and grid-auto-columns.
8. Benefits of Using Grid for Layouts
- Two-dimensional control: Align items vertically and horizontally with precision.
- Responsiveness: Easily adapt layouts using media queries and
frunits. - Clean markup: No need for extra wrappers or clearfixes.
- Semantic layout design: Use named areas and simplified positioning.
Grid excels in designing:
- Full page layouts
- Card grids
- Image galleries
- Dashboards
- Blog templates
9. Summary and What’s Next
CSS Grid brings a new level of layout control to the web. Its ability to manage two-dimensional spaces with ease makes it a game-changer in frontend development. You now know the basics of how to declare a grid, structure it with rows and columns, and control item placement.
