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

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

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