Syntax

Place Items

Setting align-items and justify-items at the same time.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
place-items:align-items|justify-itemsplace-items: align-items justify-items;
place-items:autoplace-items: auto;
place-items:normalplace-items: normal;
place-items:baselineplace-items: baseline;
place-items:centerplace-items: center;
place-items:stretchplace-items: stretch;
place-items:startplace-items: start;
place-items:endplace-items: end;
place-items:flex-startplace-items: flex-start;
place-items:flex-endplace-items: flex-end;
place-items:self-startplace-items: self-start;
place-items:self-endplace-items: self-end;

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="place-items:baseline:hover place-items:baseline@sm place-items:baseline@dark place-items:baseline@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.