Flexbox & Grid
place-items
Setting align-items and justify-items at the same time.
Overview
| Class | Declarations |
|---|---|
place-items:normal | place-items: normal;
|
place-items:baseline | place-items: baseline;
|
place-items:center | place-items: center;
|
place-items:stretch | place-items: stretch;
|
place-items:start | place-items: start;
|
place-items:end | place-items: end;
|
place-items:flex-start | place-items: flex-start;
|
place-items:flex-end | place-items: flex-end;
|
place-items:self-start | place-items: self-start;
|
place-items:self-end | place-items: self-end;
|
place-items:<align-items>|<justify-items> | place-items: <align-items> <justify-items>;
|
Examples
Align grid items on both axes
Use place-items:* as shorthand for align-items and justify-items.
<div class="grid place-items:center h:48x"> <button>Centered</button></div>Generated CSS
@layer utilities { .grid { display: grid } .place-items\:center { place-items: center } .h\:48x { height: 12rem }}Stretch items
Use place-items:stretch when children should fill their grid areas in both axes.
<section class="grid place-items:stretch">...</section>Use place-self when only one item needs a different two-axis alignment.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="place-items:stretch place-items:center@sm place-items:stretch@print">...</div>For flexbox, place-items has limited use; prefer align-items and justify-content.