Min-width

Layout stops #

Use d-wmn-{stop} to set a fixed minimum width for an element using layout token stops. The hyphen before the number indicates a layout token reference, e.g. d-wmn-100 outputs min-inline-size: var(--dt-layout-100) (64px). This can be combined with d-w{n}p and d-wmx-{stop} to have an element fill a certain width range.

<div class="d-wmn-100">1</div>
<div class="d-wmn-150">2</div>
<div class="d-wmn-500">3</div>

Percentages #

Use d-wmn{n}p to set a minimum width percentage for an element. No hyphen before the number, p suffix indicates a literal percentage value. Note: d-wmn33p = 33.333% and d-wmn66p = 66.667%.

<div class="d-wmn-50p">1</div>
<div class="d-wmn-75p">2</div>
<div class="d-wmn-100p">3</div>

Character width #

Use d-wmn{n}ch to set a minimum width based on character count. Useful for ensuring text containers maintain a minimum readable width.

<div class="d-wmn60ch">...</div>   <!-- min-inline-size: 60ch -->
<div class="d-wmn75ch">...</div>   <!-- min-inline-size: 75ch -->
<div class="d-wmn90ch">...</div>   <!-- min-inline-size: 90ch -->

Keywords #

Use keyword utilities to set minimum width using CSS keyword values.

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

Classes #