Max-width

Layout stops #

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

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

Percentages #

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

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

Character width #

Use d-wmx{n}ch to set a maximum width based on character count. Useful for limiting text line lengths for optimal readability.

<div class="d-wmx60ch">...</div>   <!-- max-inline-size: 60ch -->
<div class="d-wmx75ch">...</div>   <!-- max-inline-size: 75ch -->
<div class="d-wmx90ch">...</div>   <!-- max-inline-size: 90ch -->

Keywords #

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

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

Classes #