Layout

Control how elements participate in the flow: display, positioning, stacking, overflow and aspect ratio.

Display

Utility	Generated CSS
`Block()`	`display: block`
`InlineBlock()`	`display: inline-block`
`Inline()`	`display: inline`
`Flex()`	`display: flex`
`Grid()`	`display: grid`
`Hidden()`	`display: none`

Block

Inline block Inline

<div class="@Css.Block().Background(Color.Blue100).P(3)">Block</div>
<span class="@Css.InlineBlock().Background(Color.Emerald100).P(3)">Inline block</span>
<span class="@Css.Inline().Background(Color.Amber100).P(1)">Inline</span>
<div class="@Css.Hidden()">Hidden</div>

Position

Utility	Generated CSS
`Relative()`	`position: relative`
`Absolute()`	`position: absolute`
`Fixed()`	`position: fixed`
`Sticky()`	`position: sticky`

Combine a position with the offset helpers. Offsets use the spacing scale, so Top(4) is 1rem.

Utility	Generated CSS
`Inset(4)`	`inset: 1rem`
`Top(4)`	`top: 1rem`
`Right(4)`	`right: 1rem`
`Bottom(4)`	`bottom: 1rem`
`Left(4)`	`left: 1rem`
`Z(10)`	`z-index: 10`

New

<div class="@Css.Relative().H(32).RoundedLg().Background(Color.Slate100)">
    <div class="@Css.Absolute().Top(2).Right(2).Px(3).Py(1)
                    .RoundedFull().TextXs().FontBold()
                    .Background(Color.Red500).Color(Color.White)">
        New
    </div>
</div>

Stacking

Utility	Generated CSS
`Z(0)`	`z-index: 0`
`Z(10)`	`z-index: 10`
`Z(50)`	`z-index: 50`

Overflow

Utility	Generated CSS
`OverflowAuto()`	`overflow: auto`
`OverflowHidden()`	`overflow: hidden`
`OverflowScroll()`	`overflow: scroll`

Scrollable content.

<div class="@Css.OverflowAuto().H(24).P(3).RoundedMd()">
    <p>Scrollable content.</p>
    ...
</div>

Object fit and aspect ratio

Utility	Generated CSS
`ObjectCover()`	`object-fit: cover`
`ObjectContain()`	`object-fit: contain`
`AspectSquare()`	`aspect-ratio: 1 / 1`
`AspectVideo()`	`aspect-ratio: 16 / 9`

<div class="@Css.Grid().GridCols(2).Gap(4)">
    <div class="@Css.AspectSquare().RoundedMd().Background(Color.Indigo500)"></div>
    <div class="@Css.AspectVideo().RoundedMd().Background(Color.Violet500)"></div>
</div>