CSS Grid is a powerful layout system designed to build full page layouts using rows and columns.
Unlike Flexbox, which works mainly in one direction, Grid works in two directions at the same time.
This makes CSS Grid perfect for dashboards, landing pages, and complete website structures.
Here, the container becomes a grid container using display grid.
The layout is created using three columns, and each item fits automatically into a cell.
Grid makes it very easy to create equal-width columns.
With just one line of CSS, you can create clean layouts that work on all screen sizes.
This example shows how CSS Grid is used to build real layouts like admin panels and dashboards.
Grid makes it easy to control both rows and columns at the same time.
Why CSS Grid is important
- Creates complete page layouts easily
- Works in both directions at once
- Reduces the need for complex positioning
- Used in modern websites and applications
CSS Grid also makes centering content very easy.
With place-items center, you can align content both horizontally and vertically.
Practice task
Create a grid container and:
- Add three columns
- Add two rows
- Place items in different cells
- Try changing the column sizes
Next lesson
In the next page, you will learn about grid containers and grid items in detail.