CSS Grid gives you powerful alignment tools to control how items are placed inside cells.
You can align items horizontally using justify-items
You can align items vertically using align-items
For individual items, you can use justify-self and align-self.
Justify-items controls horizontal alignment inside each grid cell.
Align-items controls vertical alignment inside each grid cell.
Together, they decide where content sits inside every grid box.
Center alignment is commonly used for cards, icons, and call-to-action sections.
Grid makes centering very easy with just two properties.
Place-items is a shortcut for justify-items and align-items.
It is often used when you want to center everything quickly.
Aligning individual items
- justify-self controls horizontal alignment for one item
- align-self controls vertical alignment for one item
- These override the grid container alignment
Here, only one box is aligned to the bottom-right of its cell.
This gives you fine control over individual elements.
Practice task
Create a grid layout and:
- Use justify-items center
- Use align-items center
- Change one item using justify-self and align-self
- Observe the difference
Next lesson
In the next page, you will build a complete real-world layout using CSS Grid.