Sizing

Width

Utilities for sets the width of an element.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
width-auto	width: auto
width-full	width: 100%
width-screen	width: 100vw

class	css
width-px	width: 1px
width-0	width: 0
width-1	width: 0.25rem
width-2	width: 0.5rem
width-3	width: 0.75rem
width-4	width: 1rem
width-5	width: 1.25rem
width-6	width: 1.5rem
width-8	width: 2rem
width-10	width: 2.5rem
width-12	width: 3rem
width-16	width: 4rem
width-20	width: 5rem
width-24	width: 6rem
width-32	width: 8rem
width-40	width: 10rem
width-48	width: 12rem
width-56	width: 14rem
width-64	width: 16rem
width-72	width: 18rem
width-80	width: 20rem
width-88	width: 22rem
width-96	width: 24rem
width-104	width: 26rem
width-112	width: 28rem

class	css
width-1/2	width: 50%
width-1/3	width: 33.333333%
width-2/3	width: 66.666667%
width-1/4	width: 25%
width-2/4	width: 50%
width-3/4	width: 75%
width-1/5	width: 20%
width-2/5	width: 40%
width-3/5	width: 60%
width-4/5	width: 80%
width-1/6	width: 16.666667%
width-2/6	width: 33.333333%
width-3/6	width: 50%
width-4/6	width: 66.666667%
width-5/6	width: 83.333333%
width-1/12	width: 8.333333%
width-2/12	width: 16.666667%
width-3/12	width: 25%
width-4/12	width: 33.333333%
width-5/12	width: 41.666667%
width-6/12	width: 50%
width-7/12	width: 58.333333%
width-8/12	width: 66.666667%
width-9/12	width: 75%
width-10/12	width: 83.333333%
width-11/12	width: 91.666667%

Usage

Set basic width to an element.

<div class="width-4">
  ...
</div>

HTML

.dummy {
  @extend
    .width-4;
}

SCSS

Set full width to an element.

<div class="width-full">
  ...
</div>

HTML

.dummy {
  @extend
    .width-full;
}

SCSS

Set full width in viewport screen to an element.

<div class="width-screen">
  ...
</div>

HTML

.dummy {
  @extend
    .width-screen;
}

SCSS

Set 2-column width 1/2 to an element companion with flex utility (See Flex).

<div class="flex (expand)width-1/2">
  <div> ... </div>
  <div> ... </div>
</div>

HTML

.dummy-parrent {
  @extend
    .flex,
    .(expand)width-1/2;
}

SCSS

Set 3-column width 1/3 to an element.

<div class="flex (expand)width-1/3">
  <div> ... </div>
  <div> ... </div>
  <div> ... </div>
</div>

HTML

.dummy {
  @extend
    .flex,
    .(expand)width-1/3;
}

SCSS

...mixed 3-column widths.

<div class="flex">
  <div class="width-2/3">
    ...
  </div>
  <div class="width-1/3">
    ...
  </div>
</div>

HTML

.dummy-parent {
  @extend
    .flex;
}
.dummy-child {
  @extend
    .width-2/3;
}

SCSS

Set 4-column width 1/4 to an element.

<div class="flex (expand)width-1/4">
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>

HTML

.dummy {
  @extend
    .flex,
    .(expand)width-1/4;
}

SCSS

...mixed 4-column widths.

<div class="flex">
<div class="width-2/4"> ... </div>
<div class="width-3/4"> ... </div>
</div>

HTML

.dummy-parent {
  @extend
    .flex;
}
.dummy-child {
 @extend
    .width-2/4;
}

SCSS

Set 5-column width 1/5 to an element.

<div class="flex (expand)width-1/5">
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>

HTML

.dummy {
  @extend
    .flex,
    .(expand)width-1/5;
}

SCSS

...mixed 5-column widths.

<div class="flex">
<div class="width-3/5"> ... </div>
<div class="width-2/5"> ... </div>
</div>

HTML

.dummy-parent {
  @extend
    .flex;
}
.dummy-child {
  @extend
    .width-3/5;
}

SCSS

Set 6-column width 1/6 to an element.

<div class="flex (expand)width-1/6">
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>

HTML

.dummy {
  @extend
    .flex,
    .(expand)width-1/6;
}

SCSS

...mixed 6-column widths.

<div class="flex">
<div class="width-4/6"> ... </div>
<div class="width-2/6"> ... </div>
</div>

HTML

.dummy-parent {
  @extend
    .flex;
}
.dummy-child {
  @extend
    .width-4/6;
}

SCSS

Set 12-column width 1/12 to an element.

<div class="flex (expand)width-1/12">
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>

HTML

.dummy {
  @extend
    .flex,
    .(expand)width-1/12;
}

SCSS

...mixed 12-column widths.

<div class="flex">
<div class="width-4/12"> ... </div>
<div class="width-6/12"> ... </div>
<div class="width-2/12"> ... </div>
</div>

HTML

.dummy {
  @extend
    .flex;
}
.dummy {
  @extend
    .width-4/12;
}

SCSS

Use (expand) variant to apply width to all child elements.

<!-- Parent -->
<div class="(expand)width-24">
<!-- Child -->
<div>...</div>
<div>...</div>
<div>...</div>
</div>

HTML

.dummy {
  @extend
    .(expand)width-24;
}

SCSS