Sizing

Sizing utilities provide classes for defining an element’s width and height.

Usage

Use sizing utilities to define an element’s width or height using preset values.

Classes follow the pattern env-{property}--{size}.

Valid values

{property}

w (width)
h (height)

{size}

Available values are percentage-based:

25
50
75
100

Width examples

25%

50%

75%

100%

<div class="example-sizing">
   <div class="env-w--25 env-p--x-small env-m-block-end--small">25%</div>
   <div class="env-w--50 env-p--x-small env-m-block-end--small">50%</div>
   <div class="env-w--75 env-p--x-small env-m-block-end--small">75%</div>
   <div class="env-w--100 env-p--x-small">100%</div>
</div>

Height examples

25%

50%

75%

100%

<div class="example-sizing-h">
   <div
      class="env-h--25 env-p--x-small env-m-inline-end--small env-d--inline-block"
   >
      25%
   </div>
   <div
      class="env-h--50 env-p--x-small env-m-inline-end--small env-d--inline-block"
   >
      50%
   </div>
   <div
      class="env-h--75 env-p--x-small env-m-inline-end--small env-d--inline-block"
   >
      75%
   </div>
   <div class="env-h--100 env-p--x-small env-d--inline-block">100%</div>
</div>

Max size

Utility classes are also available for constraining elements to their container:

env-mw--100 (max-width)
env-mh--100 (max-height)