Skip to main content

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.

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

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;
<div class="ws1"></div>
<div class="ws2"></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="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
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;
<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
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%;
<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 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;
<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
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;
Class Output Responsive?
.h-auto height: auto;
.h0 height: 0;
.h100 height: 100%;
.h-screen height: 100vh;
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%;
.hmn-screen min-height: 100vh;
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;
Deploys by Netlify