| title | Place items | |
|---|---|---|
| description | Use place-items utilities to control the alignment of grid items within their grid areas on both the block and inline axes simultaneously. | |
| toc | true | |
| mdn | https://developer.mozilla.org/en-US/docs/Web/CSS/place-items | |
| utility |
|
import { getData } from '@libs/data'
Use place-items utilities on CSS Grid containers as a shorthand to set both align-items and justify-items at once. This property controls how grid items are positioned within their grid areas on both axes.
Use place-items utilities to control the alignment of grid items. Choose from start, end, center, or stretch (browser default).
Place
Items
Start
Place
Items
End
Place
Items
Center
Place
Items
Stretch
<div class="d-grid place-items-start">...</div>
<div class="d-grid place-items-end">...</div>
<div class="d-grid place-items-center">...</div>
<div class="d-grid place-items-stretch">...</div>Responsive variations also exist for place-items.
-
{getData('breakpoints').map((breakpoint) => {
return (
.{breakpoint.abbr}place-items-start.{breakpoint.abbr}place-items-end.{breakpoint.abbr}place-items-center.{breakpoint.abbr}place-items-stretch
)
})}
Place items utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.