afv-library/skills/applying-slds/guidance/utilities/sizing.md

id	title	description	summary	artifact_type	domain	topic	content_format	complexity	audience	tasks	refs	tags	keywords
slds.guidance.utilities.sizing	Sizing Utilities	SLDS width sizing utility classes for responsive layouts	Utilities for width sizing. Fractional widths (1-of-2 through 1-of-12), absolute sizes, responsive breakpoints, and flex ordering.	reference	utilities	sizing	structured	intermediate	implementer	implement	slds.guidance.utilities slds.guidance.overview.utilities slds.guidance.utilities.grid	utilities sizing width responsive fractional	slds-size slds-order fractional width responsive sizing

Sizing - Width Control

Width sizing and flex ordering.

Core Classes

Fractional Widths

Based on 12-column grid system with denominators of 2, 3, 4, 5, 6, 7, 8, and 12.

Class	Purpose
slds-size_1-of-2	Sets width to 50%
slds-size_1-of-3	Sets width to 33.333%
slds-size_2-of-3	Sets width to 66.6667%
slds-size_1-of-4	Sets width to 25%
slds-size_3-of-4	Sets width to 75%
slds-size_1-of-5	Sets width to 20%
slds-size_2-of-5	Sets width to 40%
slds-size_3-of-5	Sets width to 60%
slds-size_4-of-5	Sets width to 80%
slds-size_1-of-6	Sets width to 16.6667%
slds-size_5-of-6	Sets width to 83.3333%
slds-size_1-of-7	Sets width to 14.2857%
slds-size_1-of-8	Sets width to 12.5%
slds-size_1-of-12	Sets width to 8.3333%
slds-size_5-of-12	Sets width to 41.6667%
slds-size_7-of-12	Sets width to 58.3333%
slds-size_11-of-12	Sets width to 91.6667%

Absolute Sizes

Fixed widths in rem units.

Class	Purpose
slds-size_xxx-small	Sets width to 3rem (48px)
slds-size_xx-small	Sets width to 6rem (96px)
slds-size_x-small	Sets width to 12rem (192px)
slds-size_small	Sets width to 15rem (240px)
slds-size_medium	Sets width to 20rem (320px)
slds-size_large	Sets width to 25rem (400px)
slds-size_x-large	Sets width to 40rem (640px)
slds-size_xx-large	Sets width to 60rem (960px)
slds-size_full	Sets width to 100%

Responsive Breakpoints

Breakpoint-specific sizing with mobile-first approach.

Breakpoint	Viewport Width	Prefix
x-small	≥ 320px (20em)	slds-x-small-size_*
small	≥ 480px (30em)	slds-small-size_*
medium	≥ 768px (48em)	slds-medium-size_*
large	≥ 1024px (64em)	slds-large-size_*
x-large	≥ 1280px (80em)	slds-x-large-size_*
max-small	< 480px (30em)	slds-max-small-size_*
max-medium	< 768px (48em)	slds-max-medium-size_*
max-large	< 1024px (64em)	slds-max-large-size_*

Flex Ordering

Controls visual order in flexbox layouts.

Class	Purpose
slds-order_1	Sets flex order to 1
slds-order_2	Sets flex order to 2
slds-order_3	Sets flex order to 3
slds-order_4	Sets flex order to 4
slds-order_5	Sets flex order to 5
slds-order_6 through slds-order_12	Sets flex order 6-12

Common Patterns

Three-Column Layout

<!-- Three equal columns -->
<div class="slds-grid slds-wrap">
  <div class="slds-size_1-of-3">
    <!-- Column 1: 33.333% width -->
  </div>
  <div class="slds-size_1-of-3">
    <!-- Column 2: 33.333% width -->
  </div>
  <div class="slds-size_1-of-3">
    <!-- Column 3: 33.333% width -->
  </div>
</div>

Responsive Grid

<!-- Full width mobile, half tablet, quarter desktop -->
<div class="slds-grid slds-wrap">
  <div class="slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-4">
    <!-- Card adapts from 100% → 50% → 25% -->
  </div>
  <div class="slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-4">
    <!-- Card adapts from 100% → 50% → 25% -->
  </div>
</div>

Sidebar Layout

<!-- Fixed sidebar with flexible content -->
<div class="slds-grid">
  <nav class="slds-size_medium">
    <!-- Sidebar: 320px fixed width -->
  </nav>
  <main class="slds-col">
    <!-- Content: Fills remaining space -->
  </main>
</div>

Reordered Content

<!-- Visual order differs from DOM order -->
<div class="slds-grid">
  <div class="slds-size_1-of-3 slds-order_3">
    <!-- Appears third visually -->
  </div>
  <div class="slds-size_1-of-3 slds-order_1">
    <!-- Appears first visually -->
  </div>
  <div class="slds-size_1-of-3 slds-order_2">
    <!-- Appears second visually -->
  </div>
</div>

Form Layout

<!-- Two-column form with responsive stacking -->
<div class="slds-form" role="form">
  <div class="slds-grid slds-wrap slds-gutters">
    <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
      <!-- First Name field: Full width mobile, half desktop -->
    </div>
    <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
      <!-- Last Name field: Full width mobile, half desktop -->
    </div>
    <div class="slds-col slds-size_1-of-1">
      <!-- Email field: Always full width -->
    </div>
  </div>
</div>

Best Practices

✅ Use fractional widths for flexible grid layouts ✅ Apply responsive classes for mobile-first design ✅ Combine with slds-grid and slds-wrap for proper grid behavior ✅ Use slds-col for flexible remaining space ✅ Apply slds-gutters to parent grid for consistent spacing ✅ Use semantic HTML elements with sizing utilities

❌ Avoid mixing fractional and absolute sizes on siblings ❌ Never use sizing utilities without proper grid container ❌ Avoid using more than 12 total columns per row ❌ Never rely solely on slds-order_* for accessibility - maintain logical DOM order