place-* aligns both axes at once — the two-value shorthand for center-everything. This family contains 18 generated classes in Nakshora 3.0.

Classes#

ClassGenerated CSS
place-content-centerplace-content: center;
place-content-startplace-content: start;
place-content-endplace-content: end;
place-content-betweenplace-content: space-between;
place-content-aroundplace-content: space-around;
place-content-evenlyplace-content: space-evenly;
place-content-baselineplace-content: baseline;
place-content-stretchplace-content: stretch;
place-items-startplace-items: start;
place-items-endplace-items: end;
place-items-centerplace-items: center;
place-items-baselineplace-items: baseline;
place-items-stretchplace-items: stretch;
place-self-autoplace-self: auto;
place-self-startplace-self: start;
place-self-endplace-self: end;
place-self-centerplace-self: center;
place-self-stretchplace-self: stretch;

Example#

example
html
<div class="grid place-items-center h-48">Dead center</div>

Responsive & variants#

Every class here accepts screen prefixes (sm: … xl:) 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

utilities/grid/grid-template-columns|Grid · comparisons/grid-vs-flexbox|Grid vs flexbox