Skip to contentSkip to footer
Five elephants on brown grass

Photo: Larry Li

Sizing

Introduction

Set specific width, height, and minimum height values to an element.

Width Utilities

Natura11y provides the following width utilities. Number values represent a percentage. For example, the .width-50 utility makes its selector 50% of its parent. The .width-100vw and .width-auto utilities provide viewport-width and automatic width options.

10

20

25

30

40

50

60

70

75

80

90

100

HTML
      <div class="width-10">...</div>
      <div class="width-20">...</div>
      <div class="width-25">...</div>
      <div class="width-30">...</div>
      <div class="width-40">...</div>
      <div class="width-50">...</div>
      <div class="width-60">...</div>
      <div class="width-70">...</div>
      <div class="width-75">...</div>
      <div class="width-80">...</div>
      <div class="width-90">...</div>
      <div class="width-100">...</div>
      <div class="width-100vw">...</div>
      <div class="width-auto">...</div>
Figure 1

Breakpoint Modifiers

Width Utilities accept breakpoint modifiers.

HTML
      <!-- With breakpoint modifier -->


      <div class="width-75--lg">...</div>
Figure 2

Height Utilities

Natura11y provides height and minimum height utilities for full-height elements:

.height-100

.min-height-100

HTML
      <div class="height-100">...</div>
      <div class="min-height-100">...</div>


      <!-- 100% height of viewport -->
      <div class="height-100vh">...</div>
      <div class="min-height-100vh">...</div>
Figure 3

Breakpoint Modifiers

Height and minimum height utilities accept breakpoint modifiers.

HTML
      <!-- With breakpoint modifier -->


      <div class="height-100--lg">...</div>
      <div class="min-height-100--lg">...</div>
      <div class="height-100vh--lg">...</div>
      <div class="min-height-100vh--lg">...</div>
Figure 4

Container

Grid