Utilities

Sizing

information

You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20

Sizing utilities allow for easy width sizing on an element.

About Sizing#

Our sizing class names are set up in a human-readable format, e.g. .slds-size_1-of-2. This equates to a width of 50%.

By default, a group of sizing helpers are created based on standard grid column spans of 2, 3, 4, 5, 6, 7, 8 and 12. For example, if you need 3 cards to horizontally align along the same x-axis, you would use the class .slds-size_1-of-3 on each element. This will make each card take up 33.333% of containing section.

Our sizing helpers have the option to be responsive. By pre-pending a breakpoint name to a sizing helper, e.g. .slds-medium-size_1-of-3 you will output a width at the specified breakpoint name.

Absolute sizing helpers are also available (where widths are declared in rem units): xx-small, x-small, medium, large, x-large and xx-large as defined in the sizing category of the Design Tokens. e.g. .slds-size_large.

In some uncommon cases, you may need a sizing helper that is up to a certain breakpoint. For these, use the classes prefixed with max- to achieve this result.

Here is an overview of our available breakpoint names:

Breakpoint NameBreakpoint Width
small-30em / 480px and higher
medium-48em / 768px and higher
large-64em / 1024px and higher
max-small-up to 29.9375em / 479px
max-medium-up to 47.9375em / 767px
max-large-up to 63.9375em / 1023px

Our responsive sizing helpers are built upon a mobile first approach. To achieve the desired outcome of this approach, you will need to append responsive sizing helpers to an element that overrides the previous breakpoint. A default sizing helper is required and responsive sizing helpers are additive. The following example demonstrates the class name position for each breakpoint:

<div class="[default] [small size override] [medium size override] [large size override]">

Examples#

2 Column Span#

.slds-size_1-of-2
.slds-size_1-of-2
.slds-size_2-of-2
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
  <div class="slds-size_1-of-2">
    <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-2</div>
  </div>

3 Column Span#

.slds-size_1-of-3
.slds-size_1-of-3
.slds-size_1-of-3
.slds-size_1-of-3
.slds-size_2-of-3
.slds-size_3-of-3
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
  <div class="slds-size_1-of-3">
    <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-3</div>
  </div>

4 Column Span#

.slds-size_1-of-4
.slds-size_1-of-4
.slds-size_1-of-4
.slds-size_1-of-4
.slds-size_1-of-4
.slds-size_3-of-4
.slds-size_2-of-4
.slds-size_2-of-4
.slds-size_4-of-4
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
  <div class="slds-size_1-of-4">
    <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-4</div>
  </div>

5 Column Span#

.slds-size_1-of-5
.slds-size_1-of-5
.slds-size_1-of-5
.slds-size_1-of-5
.slds-size_1-of-5
.slds-size_1-of-5
.slds-size_4-of-5
.slds-size_2-of-5
.slds-size_3-of-5
.slds-size_5-of-5
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
  <div class="slds-size_1-of-5">
    <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-5</div>
  </div>

6 Column Span#

.slds-size_1-of-6
.slds-size_1-of-6
.slds-size_1-of-6
.slds-size_1-of-6
.slds-size_1-of-6
.slds-size_1-of-6
.slds-size_2-of-6
.slds-size_4-of-6
.slds-size_3-of-6
.slds-size_3-of-6
.slds-size_6-of-6
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
  <div class="slds-size_1-of-6">
    <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-6</div>
  </div>

7 Column Span#

.slds-size_1-of-7
.slds-size_1-of-7
.slds-size_1-of-7
.slds-size_1-of-7
.slds-size_1-of-7
.slds-size_1-of-7
.slds-size_1-of-7
.slds-size_2-of-7
.slds-size_5-of-7
.slds-size_3-of-7
.slds-size_4-of-7
.slds-size_7-of-7
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
  <div class="slds-size_1-of-7">
    <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-7</div>
  </div>

8 Column Span#

.slds-size_1-of-8
.slds-size_1-of-8
.slds-size_1-of-8
.slds-size_1-of-8
.slds-size_1-of-8
.slds-size_1-of-8
.slds-size_1-of-8
.slds-size_1-of-8
.slds-size_2-of-8
.slds-size_6-of-8
.slds-size_3-of-8
.slds-size_5-of-8
.slds-size_4-of-8
.slds-size_4-of-8
.slds-size_8-of-8
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
  <div class="slds-size_1-of-8">
    <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-8</div>
  </div>

12 Column Span#

.slds-size_1-of-12
.slds-size_1-of-12
.slds-size_1-of-12
.slds-size_1-of-12
.slds-size_1-of-12
.slds-size_1-of-12
.slds-size_1-of-12
.slds-size_1-of-12
.slds-size_1-of-12
.slds-size_1-of-12
.slds-size_1-of-12
.slds-size_1-of-12
.slds-size_2-of-12
.slds-size_10-of-12
.slds-size_3-of-12
.slds-size_9-of-12
.slds-size_4-of-12
.slds-size_8-of-12
.slds-size_5-of-12
.slds-size_7-of-12
.slds-size_6-of-12
.slds-size_6-of-12
.slds-size_12-of-12
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
  <div class="slds-size_1-of-12">
    <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-12</div>
  </div>

Overview of CSS Classes#

Selector.slds-size_small
Summary
Restrict*
ModifierTrue
Selector.slds-size_full
Summary
Restrict*
ModifierTrue

Sizing Utility Release Notes