This is a preview, you can find the current version here.

Last updated: 12/17/2025

Width & height

Stacks provides atomic sizing classes for percentage-based widths & heights, viewport-based widths & heights, static widths & heights, max-widths & heights, and min-widths & heights.

Widths

Width classes

Width classes are provided at each fixed stop of our pixel-based sizing scale.

Class	Output	Responsive?
`.w0`	width: 0;
`.w2`	width: 2px;
`.w4`	width: 4px;
`.w6`	width: 6px;
`.w8`	width: 8px;
`.w12`	width: 12px;
`.w16`	width: 16px;
`.w24`	width: 24px;
`.w32`	width: 32px;
`.w48`	width: 48px;
`.w64`	width: 64px;
`.w96`	width: 96px;
`.w128`	width: 128px;

Width examples

<div class="w2">…</div>
<div class="w4">…</div>
<div class="w6">…</div>
<div class="w8">…</div>
<div class="w12">…</div>
<div class="w16">…</div>
<div class="w24">…</div>
<div class="w32">…</div>
<div class="w48">…</div>
<div class="w64">…</div>
<div class="w96">…</div>
<div class="w128">…</div>

.w2

.w4

.w6

.w8

.w12

.w16

.w24

.w32

.w48

.w64

.w96

.w128

Fluid width

Fluid width classes

Class	Output	Responsive?
`.w-auto`	width: auto;
`.w0`	width: 0;
`.w10`	width: 10%;
`.w20`	width: 20%;
`.w25`	width: 25%;
`.w30`	width: 30%;
`.w33`	width: 33.33%;
`.w40`	width: 40%
`.w50`	width: 50%;
`.w60`	width: 60%;
`.w66`	width: 66.67%;
`.w70`	width: 70%;
`.w75`	width: 75%;
`.w80`	width: 80%;
`.w90`	width: 90%;
`.w100`	width: 100%;
`.w-screen`	width: 100vw;

Fluid width examples

<div class="w0">…</div>
<div class="w10">…</div>
<div class="w20">…</div>
<div class="w25">…</div>
<div class="w30">…</div>
<div class="w33">…</div>
<div class="w40">…</div>
<div class="w50">…</div>
<div class="w60">…</div>
<div class="w70">…</div>
<div class="w75">…</div>
<div class="w80">…</div>
<div class="w90">…</div>
<div class="w100">…</div>
<div class="w-screen">…</div>

.w100

.w10

.w90

.w20

.w80

.w25

.w75

.w30

.w70

.w33

.w66

.w40

.w60

.w50

.w-screen

Static widths are based on the full width of our 12-column grid. The grid is defined in rems, which are tied to the base font size. At the default font size, the full width is 1264px. A single column is approximately 105px.

At the smallest breakpoint, our font size is reduced, and these static widths are therefore also reduced.

Static width classes

Class	Output	Responsive?
`.ws1`	width: 105px;
`.ws2`	width: 211px;
`.ws3`	width: 316px;
`.ws4`	width: 421px;
`.ws5`	width: 527px;
`.ws6`	width: 632px;
`.ws7`	width: 737px;
`.ws8`	width: 843px;
`.ws9`	width: 948px;
`.ws10`	width: 1053px;
`.ws11`	width: 1159px;
`.ws12`	width: 1264px;

Static width examples

<div class="ws1">…</div>
<div class="ws2">…</div>
<div class="ws3">…</div>
<div class="ws4">…</div>
<div class="ws5">…</div>
<div class="ws6">…</div>
<div class="ws7">…</div>
<div class="ws8">…</div>
<div class="ws9">…</div>
<div class="ws10">…</div>
<div class="ws11">…</div>
<div class="ws12">…</div>

.ws1

.ws2

.ws3

.ws4

.ws5

.ws6

.ws7

.ws8

.ws9

.ws10

.ws11

.ws12

Max width

Max width classes

Class	Output	Responsive?
`.wmx-initial`	max-width: initial;
`.wmx1`	max-width: 105px;
`.wmx2`	max-width: 211px;
`.wmx25`	max-width: 25%;
`.wmx3`	max-width: 316px;
`.wmx4`	max-width: 421px;
`.wmx5`	max-width: 527px;
`.wmx50`	max-width: 50%;
`.wmx6`	max-width: 632px;
`.wmx7`	max-width: 737px;
`.wmx8`	max-width: 843px;
`.wmx75`	max-width: 75%;
`.wmx9`	max-width: 948px;
`.wmx10`	max-width: 1053px;
`.wmx11`	max-width: 1159px;
`.wmx12`	max-width: 1264px;
`.wmx100`	max-width: 100%;
`.wmx-screen`	max-width: 100vw;

Max width examples

<div class="wmx-initial">…</div>
<div class="wmx1">…</div>
<div class="wmx2">…</div>
<div class="wmx25">…</div>
<div class="wmx3">…</div>
<div class="wmx4">…</div>
<div class="wmx5">…</div>
<div class="wmx50">…</div>
<div class="wmx6">…</div>
<div class="wmx7">…</div>
<div class="wmx75">…</div>
<div class="wmx8">…</div>
<div class="wmx9">…</div>
<div class="wmx10">…</div>
<div class="wmx11">…</div>
<div class="wmx12">…</div>
<div class="wmx100">…</div>
<div class="wmx-screen">…</div>

.wmx1

.wmx2

.wmx25

.wmx3

.wmx4

.wmx5

.wmx50

.wmx6

.wmx7

.wmx75

.wmx8

.wmx9

.wmx10

.wmx11

.wmx12

.wmx-screen

Min width

Min width classes

Class	Output	Responsive?
`.wmn-initial`	min-width: initial;
`.wmn0`	min-width: 0;
`.wmn1`	min-width: 105px;
`.wmn2`	min-width: 211px;
`.wmn25`	min-width: 25%;
`.wmn3`	min-width: 316px;
`.wmn4`	min-width: 421px;
`.wmn5`	min-width: 527px;
`.wmn50`	min-width: 50%;
`.wmn6`	min-width: 632px;
`.wmn7`	min-width: 737px;
`.wmn75`	min-width: 75%;
`.wmn8`	min-width: 843px;
`.wmn9`	min-width: 948px;
`.wmn10`	min-width: 1053px;
`.wmn11`	min-width: 1159px;
`.wmn12`	min-width: 1264px;
`.wmn100`	min-width: 100%;

Min width examples

<div class="wmn-initial">…</div>
<div class="wmn0">…</div>
<div class="wmn1">…</div>
<div class="wmn2">…</div>
<div class="wmn25">…</div>
<div class="wmn3">…</div>
<div class="wmn4">…</div>
<div class="wmn5">…</div>
<div class="wmn50">…</div>
<div class="wmn6">…</div>
<div class="wmn7">…</div>
<div class="wmn75">…</div>
<div class="wmn8">…</div>
<div class="wmn9">…</div>
<div class="wmn10">…</div>
<div class="wmn11">…</div>
<div class="wmn12">…</div>
<div class="wmn100">…</div>

.wmn0

.wmn1

.wmn2

.wmn25

.wmn3

.wmn4

.wmn5

.wmn50

.wmn6

.wmn7

.wmn75

.wmn8

.wmn9

.wmn10

.wmn11

.wmn12

Height

Height classes

Height classes are provided at each fixed stop of our sizing scale.

Class	Output	Responsive?
`.h0`	height: 0;
`.h2`	height: 2px;
`.h4`	height: 4px;
`.h6`	height: 6px;
`.h8`	height: 8px;
`.h12`	height: 12px;
`.h16`	height: 16px;
`.h24`	height: 24px;
`.h32`	height: 32px;
`.h48`	height: 48px;
`.h64`	height: 64px;
`.h96`	height: 96px;
`.h128`	height: 128px;

Height examples

<div class="h2">…</div>
<div class="h4">…</div>
<div class="h6">…</div>
<div class="h8">…</div>
<div class="h12">…</div>
<div class="h16">…</div>
<div class="h24">…</div>
<div class="h32">…</div>
<div class="h48">…</div>
<div class="h64">…</div>
<div class="h96">…</div>
<div class="h128">…</div>

.h2

.h4

.h6

.h8

.h12

.h16

.h24

.h32

.h48

.h64

.h96

.h128

Static Height

Static height classes

Class	Output	Responsive?
`.hs1`	height: 105px;
`.hs2`	height: 211px;
`.hs3`	height: 316px;
`.hs4`	height: 421px;
`.hs5`	height: 527px;
`.hs6`	height: 632px;
`.hs7`	height: 737px;
`.hs8`	height: 843px;
`.hs9`	height: 948px;
`.hs10`	height: 1053px;
`.hs11`	height: 1159px;
`.hs12`	height: 1264px;

Fluid height classes

Class	Output	Responsive?
`.h-auto`	height: auto;
`.h0`	height: 0;
`.h100`	height: 100%;
`.h-screen`	height: 100vh;

Min height

Min height classes

Class	Output	Responsive?
`.hmn-initial`	min-height: initial;
`.hmn0`	min-height: 0;
`.hmn1`	min-height: 105px;
`.hmn2`	min-height: 211px;
`.hmn3`	min-height: 316px;
`.hmn4`	min-height: 421px;
`.hmn5`	min-height: 527px;
`.hmn6`	min-height: 632px;
`.hmn7`	min-height: 737px;
`.hmn8`	min-height: 843px;
`.hmn9`	min-height: 948px;
`.hmn10`	min-height: 1053px;
`.hmn11`	min-height: 1159px;
`.hmn12`	min-height: 1264px;
`.hmn100`	min-height: 100%;

Max height

Max height classes

Class	Output	Responsive?
`.hmx-initial`	max-height: initial;
`.hmx1`	max-height: 105px;
`.hmx2`	max-height: 211px;
`.hmx3`	max-height: 316px;
`.hmx4`	max-height: 421px;
`.hmx5`	max-height: 527px;
`.hmx6`	max-height: 632px;
`.hmx7`	max-height: 737px;
`.hmx8`	max-height: 843px;
`.hmx9`	max-height: 948px;
`.hmx10`	max-height: 1053px;
`.hmx11`	max-height: 1159px;
`.hmx12`	max-height: 1264px;
`.hmx100`	max-height: 100%;
`.hmx-screen`	max-height: 100vh;

Edit on GitHub