Utilities to control an element's width.
Use d-w-{stop} to set a fixed width for an element using layout token stops. The hyphen before the number indicates a layout token reference, e.g. d-w-100 outputs inline-size: var(--dt-layout-100) (64px).
<div class="d-w-100">...</div> <!-- inline-size: var(--dt-layout-100) = 64px / 6.4rem --> <div class="d-w-200">...</div> <!-- inline-size: var(--dt-layout-200) = 128px / 12.8rem --> <div class="d-w-400">...</div> <!-- inline-size: var(--dt-layout-400) = 256px / 25.6rem -->
Use d-w{n}p to set a percentage width for an element. No hyphen before the number, p suffix indicates a literal percentage value. Note: d-w33p = 33.333% and d-w66p = 66.667%.
<div class="d-w25p">25%</div> <div class="d-w50p">50%</div> <div class="d-w75p">75%</div> <div class="d-w100p">100%</div>
Use viewport width utilities to size an element relative to the viewport. d-w100vw (no hyphen, literal CSS value) sets inline-size: 100vw. The dynamic viewport variants use a hyphen: d-w-dvw, d-w-svw, d-w-lvw.
<div class="d-w100vw">...</div> <!-- inline-size: 100vw --> <div class="d-w-dvw">...</div> <!-- inline-size: 100dvw --> <div class="d-w-svw">...</div> <!-- inline-size: 100svw --> <div class="d-w-lvw">...</div> <!-- inline-size: 100lvw -->
Use d-w{n}ch to constrain width based on character count. Useful for limiting text line lengths for readability.
<div class="d-w60ch">...</div> <!-- inline-size: 60ch --> <div class="d-w75ch">...</div> <!-- inline-size: 75ch --> <div class="d-w90ch">...</div> <!-- inline-size: 90ch -->
Use keyword utilities to set width using CSS keyword values.
<div class="d-w-auto">...</div> <div class="d-w-unset">...</div> <div class="d-w-fit-content">...</div> <div class="d-w-max-content">...</div> <div class="d-w-min-content">...</div>
Class | Output |
|---|---|
| .d-w-1px | inline-size: var(--dt-layout-1px) !important; /* 1px / 0.1rem */ |
| .d-w-2px | inline-size: var(--dt-layout-2px) !important; /* 2px / 0.2rem */ |
| .d-w-8px | inline-size: var(--dt-layout-8px) !important; /* 8px / 0.8rem */ |
| .d-w-25 | inline-size: var(--dt-layout-25) !important; /* 16px / 1.6rem */ |
| .d-w-20px | inline-size: var(--dt-layout-20px) !important; /* 20px / 2.0rem */ |
| .d-w-24px | inline-size: var(--dt-layout-24px) !important; /* 24px / 2.4rem */ |
| .d-w-50 | inline-size: var(--dt-layout-50) !important; /* 32px / 3.2rem */ |
| .d-w-75 | inline-size: var(--dt-layout-75) !important; /* 48px / 4.8rem */ |
| .d-w-100 | inline-size: var(--dt-layout-100) !important; /* 64px / 6.4rem */ |
| .d-w-125 | inline-size: var(--dt-layout-125) !important; /* 80px / 8.0rem */ |
| .d-w-150 | inline-size: var(--dt-layout-150) !important; /* 96px / 9.6rem */ |
| .d-w-175 | inline-size: var(--dt-layout-175) !important; /* 112px / 11.2rem */ |
| .d-w-200 | inline-size: var(--dt-layout-200) !important; /* 128px / 12.8rem */ |
| .d-w-250 | inline-size: var(--dt-layout-250) !important; /* 160px / 16.0rem */ |
| .d-w-300 | inline-size: var(--dt-layout-300) !important; /* 192px / 19.2rem */ |
| .d-w-350 | inline-size: var(--dt-layout-350) !important; /* 224px / 22.4rem */ |
| .d-w-400 | inline-size: var(--dt-layout-400) !important; /* 256px / 25.6rem */ |
| .d-w-450 | inline-size: var(--dt-layout-450) !important; /* 288px / 28.8rem */ |
| .d-w-500 | inline-size: var(--dt-layout-500) !important; /* 320px / 32.0rem */ |
| .d-w-550 | inline-size: var(--dt-layout-550) !important; /* 352px / 35.2rem */ |
| .d-w-600 | inline-size: var(--dt-layout-600) !important; /* 384px / 38.4rem */ |
| .d-w-650 | inline-size: var(--dt-layout-650) !important; /* 416px / 41.6rem */ |
| .d-w-700 | inline-size: var(--dt-layout-700) !important; /* 448px / 44.8rem */ |
| .d-w-750 | inline-size: var(--dt-layout-750) !important; /* 480px / 48.0rem */ |
| .d-w-800 | inline-size: var(--dt-layout-800) !important; /* 512px / 51.2rem */ |
| .d-w-850 | inline-size: var(--dt-layout-850) !important; /* 544px / 54.4rem */ |
| .d-w-900 | inline-size: var(--dt-layout-900) !important; /* 576px / 57.6rem */ |
| .d-w-950 | inline-size: var(--dt-layout-950) !important; /* 608px / 60.8rem */ |
| .d-w-1000 | inline-size: var(--dt-layout-1000) !important; /* 640px / 64.0rem */ |
| .d-w-1050 | inline-size: var(--dt-layout-1050) !important; /* 672px / 67.2rem */ |
| .d-w-1100 | inline-size: var(--dt-layout-1100) !important; /* 704px / 70.4rem */ |
| .d-w-1150 | inline-size: var(--dt-layout-1150) !important; /* 736px / 73.6rem */ |
| .d-w-1200 | inline-size: var(--dt-layout-1200) !important; /* 768px / 76.8rem */ |
| .d-w-1250 | inline-size: var(--dt-layout-1250) !important; /* 800px / 80.0rem */ |
| .d-w-1300 | inline-size: var(--dt-layout-1300) !important; /* 832px / 83.2rem */ |
| .d-w-1350 | inline-size: var(--dt-layout-1350) !important; /* 864px / 86.4rem */ |
| .d-w-1400 | inline-size: var(--dt-layout-1400) !important; /* 896px / 89.6rem */ |
| .d-w-1450 | inline-size: var(--dt-layout-1450) !important; /* 928px / 92.8rem */ |
| .d-w-1500 | inline-size: var(--dt-layout-1500) !important; /* 960px / 96.0rem */ |
| .d-w-1550 | inline-size: var(--dt-layout-1550) !important; /* 992px / 99.2rem */ |
| .d-w-1600 | inline-size: var(--dt-layout-1600) !important; /* 1024px / 102.4rem */ |
| .d-w10p | inline-size: 10% !important; |
| .d-w15p | inline-size: 15% !important; |
| .d-w20p | inline-size: 20% !important; |
| .d-w25p | inline-size: 25% !important; |
| .d-w30p | inline-size: 30% !important; |
| .d-w33p | inline-size: 33.333% !important; |
| .d-w40p | inline-size: 40% !important; |
| .d-w50p | inline-size: 50% !important; |
| .d-w60p | inline-size: 60% !important; |
| .d-w66p | inline-size: 66.667% !important; |
| .d-w70p | inline-size: 70% !important; |
| .d-w75p | inline-size: 75% !important; |
| .d-w80p | inline-size: 80% !important; |
| .d-w85p | inline-size: 85% !important; |
| .d-w90p | inline-size: 90% !important; |
| .d-w100p | inline-size: 100% !important; |
| .d-w100vw | inline-size: 100vw !important; |
| .d-wdvw | inline-size: dvw !important; |
| .d-wsvw | inline-size: svw !important; |
| .d-wlvw | inline-size: lvw !important; |
| .d-w60ch | inline-size: 60ch !important; |
| .d-w75ch | inline-size: 75ch !important; |
| .d-w90ch | inline-size: 90ch !important; |
| .d-w-auto | inline-size: auto !important; |
| .d-w-unset | inline-size: unset !important; |
| .d-w-fit-content | inline-size: fit-content !important; |
| .d-w-max-content | inline-size: max-content !important; |
| .d-w-min-content | inline-size: min-content !important; |
Width documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope