Width

Width utilities. Included in @grundtone/design-tokens CSS — see Installation for setup.

All utilities support responsive prefixes: sm:, md:, lg:, xl:, 2xl:.

---

Keyword widths

<div class="flex flex-col gap-2 p-3 bg-alt rounded-md">
  <div class="w-auto p-2 rounded-sm" style="background:#3b82f6;color:#fff">.w-auto</div>
  <div class="w-full p-2 rounded-sm" style="background:#6366f1;color:#fff">.w-full</div>
  <div class="w-fit p-2 rounded-sm" style="background:#8b5cf6;color:#fff">.w-fit</div>
</div>

.w-auto

.w-full

.w-fit

Class	CSS
.w-auto	width: auto
.w-full	width: 100%
.w-screen	width: 100vw
.w-min	width: min-content
.w-max	width: max-content
.w-fit	width: fit-content

---

Fractional widths

Common layout fractions — use these for typical column-style splits.

<div class="flex flex-col gap-2 p-3 bg-alt rounded-md">
  <div class="w-25 p-2 rounded-sm" style="background:#3b82f6;color:#fff">.w-25</div>
  <div class="w-33 p-2 rounded-sm" style="background:#6366f1;color:#fff">.w-33</div>
  <div class="w-50 p-2 rounded-sm" style="background:#8b5cf6;color:#fff">.w-50</div>
  <div class="w-66 p-2 rounded-sm" style="background:#a855f7;color:#fff">.w-66</div>
  <div class="w-75 p-2 rounded-sm" style="background:#d946ef;color:#fff">.w-75</div>
  <div class="w-full p-2 rounded-sm" style="background:#ec4899;color:#fff">.w-full</div>
</div>

.w-25

.w-33

.w-50

.w-66

.w-75

.w-full

Class	CSS
.w-25	width: 25%
.w-33	width: 33.333333%
.w-50	width: 50%
.w-66	width: 66.666667%
.w-75	width: 75%

---

Percentage widths (10% steps)

Class	CSS
.w-10	width: 10%
.w-20	width: 20%
.w-30	width: 30%
.w-40	width: 40%
.w-50	width: 50%
.w-60	width: 60%
.w-70	width: 70%
.w-80	width: 80%
.w-90	width: 90%

---

Responsive

Change width at different breakpoints using the {breakpoint}: prefix:

<div class="p-3 bg-alt rounded-md">
  <div class="w-full md:w-50 p-2 rounded-sm" style="background:#3b82f6;color:#fff">
    Full on mobile, 50% from <code style="background:rgba(255,255,255,0.2);padding:0.1em 0.3em;border-radius:3px">md</code> up &mdash; resize to see
  </div>
</div>

Full on mobile, 50% from md up — resize to see

<!-- Full width on mobile, half from md, quarter from xl -->
<div class="w-full md:w-50 xl:w-25">Responsive element</div>

<!-- Auto width on mobile, fixed 33% from lg -->
<aside class="w-auto lg:w-33">Sidebar</aside>

Class	Applies from
.w-50	All sizes
.sm:w-50	≥ 640px
.md:w-50	≥ 768px
.lg:w-50	≥ 1024px
.xl:w-50	≥ 1280px
.2xl:w-50	≥ 1536px

See Breakpoints for the full breakpoint scale and customisation.