To use CSS Grid, you must understand two main parts: the grid container and the grid items.
The grid container is the parent element that uses display grid.
The grid items are the direct children inside the container.
Once you apply display grid, all direct children automatically become grid items.
Here, the div with class container is the grid container.
Each div with class item is a grid item.
They are placed automatically into grid cells created by the columns.
This example shows a real-world use of grid containers and grid items.
The layout is created using two columns:
one fixed sidebar and one flexible content area.
This profile card uses a grid container to align the avatar and text.
Grid makes it easy to control both columns and spacing with very little CSS.
Important things to remember
- display grid turns an element into a grid container
- Only direct children become grid items
- Grid is best for two-dimensional layouts
Toolbars, panels, and card layouts are commonly built using grid containers and grid items.
Practice task
Create a grid container and:
- Add two columns
- Place three items inside
- Change the column sizes
- Observe how items adjust automatically
Next lesson
In the next page, you will learn about creating grid columns and rows.