Width

Use the spacing scale or a breakpoint. Width utilities also cover auto, full, viewport widths (screen, vw, svw, lvw, dvw), intrinsic widths (min, max, fit), fractions, and max-w-none.

🥷 Didyaknow?

To add new fraction denominators (e.g. eighths), add 8 to $layout-divisions in config.

Sass mixins

Mixin	CSS properties
w($key)	width from a size, breakpoint, fraction, or viewport keyword
min-w($key)	min-width from a size, breakpoint, fraction, or viewport keyword
max-w($key)	max-width from a size, breakpoint, fraction, or viewport keyword
w-full	width: 100%
w-screen	width: 100vw
w-auto	width: auto
w-fit	width: fit-content
w-min	width: min-content
w-max	width: max-content
min-w-full	min-width: 100%
min-w-min	min-width: min-content
min-w-max	min-width: max-content
min-w-fit	min-width: fit-content
max-w-full	max-width: 100%
max-w-none	max-width: none
max-w-min	max-width: min-content
max-w-max	max-width: max-content
max-w-fit	max-width: fit-content

Accepted keys

w(), min-w(), and max-w() accept:

• A size-scale, such as 24
• A breakpoint name, like "md"
• A fraction defined in $layout-divisions, like "1/2" or "2/3"
• A viewport keyword: "screen", "vw", "svw", "lvw", or "dvw"

scss

.sidebar {
  @include crayon.w("1/2");
  @include crayon.min-w(64);
  @include crayon.max-w("lg");
}

.full-viewport {
  @include crayon.w("dvw");
}

sass

.sidebar
  +crayon.w("1/2")
  +crayon.min-w(64)
  +crayon.max-w("lg")

.full-viewport
  +crayon.w("dvw")

Responsive range mixin

Pass a base size followed by named breakpoint overrides, such as crayon.w-range(24, $md: 48, $lg: 96).

Mixin	Purpose
w-range($base, $breakpoint-range...)	Responsive width

Utility classes

Class	Property
w-{size}	width: {size}
min-w-{size}	min-width: {size}
max-w-{size}	max-width: {size}
w-{breakpoint}	width: {breakpoint width}
min-w-{breakpoint}	min-width: {breakpoint width}
max-w-{breakpoint}	max-width: {breakpoint width}
w-{n}/{d}	width: {fraction}
min-w-{n}/{d}	min-width: {fraction}
max-w-{n}/{d}	max-width: {fraction}
w-auto	width: auto
w-full	width: 100%
w-screen	width: 100vw
w-vw	width: 100vw
w-svw	width: 100svw
w-lvw	width: 100lvw
w-dvw	width: 100dvw
w-min	width: min-content
w-max	width: max-content
w-fit	width: fit-content
min-w-full	min-width: 100%
min-w-screen	min-width: 100vw
min-w-min	min-width: min-content
min-w-max	min-width: max-content
min-w-fit	min-width: fit-content
max-w-full	max-width: 100%
max-w-screen	max-width: 100vw
max-w-none	max-width: none
max-w-min	max-width: min-content
max-w-max	max-width: max-content
max-w-fit	max-width: fit-content

Examples

Sass mixins

scss

.card {
  @include crayon.w(24);
  @include crayon.max-w(96);
}

sass

.card
  +crayon.w(24)
  +crayon.max-w(96)

Utility classes

<div class="w-24 max-w-96">Constrained width</div>
<div class="w-1/2">Half width</div>
<div class="min-w-1/2 max-w-2/3">Fractionally constrained width</div>
<div class="w-full">Full width</div>
<div class="w-vw">Viewport width</div>
<div class="w-fit">Fit-content width</div>

Sass functions

Use size() to look up a spacing-scale value for the width property.

scss

.sidebar {
  width: crayon.size(64);
}

sass

.sidebar
  width: crayon.size(64)

CSS variables

.sidebar {
  width: var(--size-64);
}