docs/extension-test-page
What's New

Width

Utilities to control an element's width.

Layout stops

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).

Percentages

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%.

Viewport

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.

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

Character width

Use d-w{n}ch to constrain width based on character count. Useful for limiting text line lengths for readability.

Keywords

Use keyword utilities to set width using CSS keyword values.

Classes

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 Thursday, June 18, 2026