CSS Grid Layout
CSS Grid is used to create powerful two-dimensional layouts with rows and columns. It is ideal for galleries, dashboards, page structures, course cards and complex website sections.
display:grid
Turns a parent into a grid container.
Columns
Create equal or custom width columns.
Rows
Control row height and layout structure.
Grid Areas
Name sections like header, sidebar, main and footer.
After This Chapter, You Will Understand
This chapter helps you build professional webpage structures using rows and columns.
Grid Container
Use display:grid on a parent element.
Columns
Control the number and width of columns.
Rows
Control row height and layout blocks.
Responsive Grid
Create grids that adjust to screen width.
What is CSS Grid?
CSS Grid is a layout system that arranges elements in rows and columns.
1 Simple Meaning
CSS Grid allows a parent container to create a structured layout with rows and columns. It is called a two-dimensional layout system because it controls both horizontal and vertical directions.
2 Basic Syntax
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
The parent becomes a grid container. Its direct children become grid items.
Important CSS Grid Properties
These are the most commonly used properties for Grid layouts.
| Property | Use | Example Values |
|---|---|---|
| display | Creates grid container | grid |
| grid-template-columns | Defines columns | repeat(3, 1fr) |
| grid-template-rows | Defines rows | 100px auto |
| gap | Adds space between rows and columns | 20px |
| grid-template-areas | Creates named layout sections | "header header" "sidebar main" |
| grid-area | Assigns item to a named area | header, main, sidebar |
3 repeat() Function
repeat() makes grid code shorter and cleaner.
grid-template-columns: repeat(3, 1fr);
}
4 fr Unit
The fr unit means a fraction of available space.
grid-template-columns: 1fr 2fr 1fr;
}
CSS Grid in Action
These demos show how columns, fractions and rows work.
3 Equal Columns
Fraction Layout
Rows and Columns
Creating Page Layout with Grid Areas
Grid areas allow us to name and arrange webpage sections clearly.
5 Grid Area Syntax
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
Auto-Fit Responsive Gallery
CSS Grid can automatically adjust the number of columns based on screen size.
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
}
Practice CSS Grid Layout
Edit Grid properties and click Run Code to see the layout change.
Mistakes Students Should Avoid
Grid is powerful, but small spelling or structure mistakes can break the layout.
Wrong Habits
- Forgetting display:grid on parent
- Using Grid when simple Flexbox is enough
- Writing area names differently in CSS and item rules
- Using fixed column sizes without mobile handling
- Forgetting gap and using too much margin
Correct Habits
- Use display:grid on the parent container
- Use gap for spacing between grid items
- Use repeat() for cleaner code
- Use auto-fit and minmax for responsive grids
- Use media queries for complex layouts
Test Your Understanding
Select the correct answers and check your score.
1. Which property turns a parent into a grid container?
2. Which property defines columns?
3. What does the fr unit mean?
4. Which function helps repeat column patterns?
5. Which property creates space between grid items?
Remember These Points
Revise these before moving to Chapter 21.
CSS Grid
A two-dimensional CSS layout system for rows and columns.
display:grid
Turns a parent element into a grid container.
Columns
grid-template-columns defines column structure.
Rows
grid-template-rows defines row structure.
fr Unit
Represents a fraction of available space.
Grid Areas
Create named sections like header, sidebar and main.