What’s the difference between justify-content and align-content in Grid?

Q: What’s the difference between justify-content and align-content in Grid?

In CSS Grid, `justify-content` and `align-content` are used to control the alignment of the entire grid within its container when there is extra space. They work on the grid as a whole, not on individual grid items. `justify-content` aligns the grid *horizontally* (along the inline axis). `align-content` aligns the grid *vertically* (along the block axis). They only have an effect if the grid is smaller than its container in that axis. Common values include `start`, `end`, `center`, `space-between`, `space-around`, and `space-evenly`. .container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); justify-content: space-around; align-content: center; height: 400px; border: 2px dashed #aaa; gap: 10px; } .item { background: #03a9f4; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; } 1 2 3 4 5 6

Difficulty: 5/10

grid alignment, justify-content, align-content

Understanding justify-content and align-content in CSS Grid

In CSS Grid, justify-content and align-content are used to control the alignment of the entire grid within its container when there is extra space. They work on the grid as a whole, not on individual grid items.

Key Differences

1
justify-content aligns the grid horizontally (along the inline axis).
2
align-content aligns the grid vertically (along the block axis).
3
They only have an effect if the grid is smaller than its container in that axis.
4
Common values include start, end, , , , and .

Example: Using justify-content and align-content

Scenario Questions

0-2 years experience

Follow-up Questions