place-* aligns both axes at once — the two-value shorthand for center-everything. This family contains 18 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
place-content-center | place-content: center; |
place-content-start | place-content: start; |
place-content-end | place-content: end; |
place-content-between | place-content: space-between; |
place-content-around | place-content: space-around; |
place-content-evenly | place-content: space-evenly; |
place-content-baseline | place-content: baseline; |
place-content-stretch | place-content: stretch; |
place-items-start | place-items: start; |
place-items-end | place-items: end; |
place-items-center | place-items: center; |
place-items-baseline | place-items: baseline; |
place-items-stretch | place-items: stretch; |
place-self-auto | place-self: auto; |
place-self-start | place-self: start; |
place-self-end | place-self: end; |
place-self-center | place-self: center; |
place-self-stretch | place-self: stretch; |
Example#
example
<div class="grid place-items-center h-48">Dead center</div>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- place-items-center = the one-class centering answer
Related#
utilities/grid/grid-template-columns|Grid · comparisons/grid-vs-flexbox|Grid vs flexbox