In CSS Grid, which property centers items within their grid areas?

In CSS Grid, which property centers items within their grid areas?

• A. text-align: center
• B. align-content: center
• C. justify-items: end
• D. place-items: center

Answer: (D)

Centering items in CSS Grid means positioning each grid item inside its assigned grid area along both the row and column axes. place-items: center does this directly, acting as a shorthand for both align-items and justify-items. With a single value of center, the item is centered vertically within its grid area and horizontally within it. That’s why it’s the best choice. The other options don’t achieve the same per-item centering: text-align: center only centers inline content inside an element, not the grid item’s box within its cell; align-content: center centers the entire grid container’s tracks as a whole, not the items inside each cell; justify-items: end moves content to the end along the inline axis inside each grid area but doesn’t center it.

Centering items in CSS Grid means positioning each grid item inside its assigned grid area along both the row and column axes. place-items: center does this directly, acting as a shorthand for both align-items and justify-items. With a single value of center, the item is centered vertically within its grid area and horizontally within it. That’s why it’s the best choice.

The other options don’t achieve the same per-item centering: text-align: center only centers inline content inside an element, not the grid item’s box within its cell; align-content: center centers the entire grid container’s tracks as a whole, not the items inside each cell; justify-items: end moves content to the end along the inline axis inside each grid area but doesn’t center it.