Size

Size utilities set both inline-size (width) and block-size (height) at once. Useful for icons, avatars, thumbnails, and any element that needs to be square or have matching dimensions.

Layout stops #

Use d-size-{stop} to set both width and height using layout token stops. The hyphen before the number indicates a layout token reference, e.g. d-size-100 outputs both inline-size: var(--dt-layout-100) and block-size: var(--dt-layout-100) (64px).

<div class="d-size-100">...</div>  <!-- 64px square -->
<div class="d-size-200">...</div>  <!-- 128px square -->
<div class="d-size-400">...</div>  <!-- 256px square -->

Percentages #

Use d-size{n}p to set both width and height to the same percentage. No hyphen before the number, p suffix indicates a literal percentage value. Note: d-size33p = 33.333% and d-size66p = 66.667%.

<div class="d-size50p">...</div>   <!-- 50% width and height -->
<div class="d-size100p">...</div>  <!-- 100% width and height -->

Viewport #

Use viewport utilities to size an element relative to the viewport in both dimensions. The dynamic viewport variants adapt to mobile browser chrome changes.

• dvh/dvw (dynamic) -- adapts to mobile browser chrome appearing/disappearing.
• svh/svw (small) -- minimum viewport size, when mobile browser chrome is visible.
• lvh/lvw (large) -- maximum viewport size, when mobile browser chrome is hidden.

<div class="d-size-dvh">...</div>   <!-- inline-size: 100dvw; block-size: 100dvh -->
<div class="d-size-svh">...</div>   <!-- inline-size: 100svw; block-size: 100svh -->
<div class="d-size-lvh">...</div>   <!-- inline-size: 100lvw; block-size: 100lvh -->

Keywords #

Use keyword utilities to set both width and height using CSS keyword values.

<div class="d-size-auto">...</div>
<div class="d-size-unset">...</div>
<div class="d-size-fit-content">...</div>
<div class="d-size-max-content">...</div>
<div class="d-size-min-content">...</div>

Classes #