Grid

Grid Default Left to Right

Column Stretch

Column Stretch w/ Gutters

No Column Stretch

No Column Stretch w/ Gutters

Manual Sizing

Horizontal Alignment - Center

Horizontal Alignment - Space

Vertical Alignment - Item

Vertical Stretch

Alignment Item Bump

Ordering

Container - App Frame

Containers

Grid Column Gutters 2 col basic

Grid Intro 3 col with gutters

Grid Intro 4 col with gutters

Grid Intro 12 col

Grid Column Width 2 col

Grid Column Width all options

Grid Column Width all fraction options

Grid Column Gutters 2 col utilities

Grid Column Gutters 2 col pull padded

Grid Direct Column Gutters

Grid All Children Column Gutters

Grid Column Wrapping 3 col

Grid Column Reordering 3 col

Grid Column Nesting

Grid Vertical Align

Grid Horizontal Reversed

Grid Vertical Aligned Reversed

Grid Responsive 2 col mobile desktop

Grid Responsive 2 col mobile tablet desktop

Grid Responsive Reordering 2 col mobile desktop

Grid Horizontal Align center basic

Grid Horizontal Align center variable

Grid Horizontal Align spaced

Grid Horizontal Align spread

Grid Horizontal Align end

Grid Content Alignment Bump Left

Grid Content Alignment Bump Right

Grid Vertical Align start

Grid Vertical Align center

Grid Vertical Align end

Grid Vertical Align absolute center

Grid Vertical Align individual

.slds-grid

.slds-grid — Initializes grid

.slds-grid_frame

.slds-grid_frame — Initializes grid

.slds-grid_vertical

.slds-grid_vertical — Initializes grid

.slds-grid_vertical-reverse

.slds-grid_vertical-reverse — Initializes grid

.slds-grid_reverse

.slds-grid_reverse — Initializes grid

.slds-wrap

.slds-wrap — Allows columns to wrap when they exceed 100% of their parent's width

.slds-nowrap

.slds-nowrap — Keeps columns on one line. Allows columns to stretch and fill 100% of the parent’s width and height.

.slds-gutters

.slds-gutters — Apply 12px gutters to each grid column when you add this class to an `slds-grid` element

.slds-gutters_xxx-small

.slds-gutters_xxx-small — Apply 2px gutters to each grid column when you add this class to an `slds-grid` element

.slds-gutters_xx-small

.slds-gutters_xx-small — Apply 4px gutters to each grid column when you add this class to an `slds-grid` element

.slds-gutters_x-small

.slds-gutters_x-small — Apply 8px gutters to each grid column when you add this class to an `slds-grid` element

.slds-gutters_small

.slds-gutters_small — Apply 12px gutters to each grid column when you add this class to an `slds-grid` element

.slds-gutters_medium

.slds-gutters_medium — Apply 16px gutters to each grid column when you add this class to an `slds-grid` element

.slds-gutters_large

.slds-gutters_large — Apply 24px gutters to each grid column when you add this class to an `slds-grid` element

.slds-gutters_x-large

.slds-gutters_x-large — Apply 32px gutters to each grid column when you add this class to an `slds-grid` element

.slds-gutters_xx-large

.slds-gutters_xx-large — Apply 48px gutters to each grid column when you add this class to an `slds-grid` element

.slds-gutters_direct

.slds-gutters_direct — Apply 12px gutters to only direct column children when you add this class to an `slds-grid` element

.slds-gutters_direct-xxx-small

.slds-gutters_direct-xxx-small — Apply 2px gutters to only direct column children when you add this class to an `slds-grid` element

.slds-gutters_direct-xx-small

.slds-gutters_direct-xx-small — Apply 4px gutters to only direct column children when you add this class to an `slds-grid` element

.slds-gutters_direct-x-small

.slds-gutters_direct-x-small — Apply 8px gutters to only direct column children when you add this class to an `slds-grid` element

.slds-gutters_direct-small

.slds-gutters_direct-small — Apply 12px gutters to only direct column children when you add this class to an `slds-grid` element

.slds-gutters_direct-medium

.slds-gutters_direct-medium — Apply 16px gutters to only direct column children when you add this class to an `slds-grid` element

.slds-gutters_direct-large

.slds-gutters_direct-large — Apply 24px gutters to only direct column children when you add this class to an `slds-grid` element

.slds-gutters_direct-x-large

.slds-gutters_direct-x-large — Apply 32px gutters to only direct column children when you add this class to an `slds-grid` element

.slds-gutters_direct-xx-large

.slds-gutters_direct-xx-large — Apply 48px gutters to only direct column children when you add this class to an `slds-grid` element

.slds-grid_pull-padded

.slds-grid_pull-padded — Normalizes the 0.75rem of padding when nesting a grid in a region with `.slds-p-horizontal_small`

.slds-grid_pull-padded-xxx-small

.slds-grid_pull-padded-xxx-small — Normalizes the 0.125rem of padding when nesting a grid in a region with `.slds-p-horizontal_xxx-small`

.slds-grid_pull-padded-xx-small

.slds-grid_pull-padded-xx-small — Normalizes the 0.25rem of padding when nesting a grid in a region with `.slds-p-horizontal_xx-small`

.slds-grid_pull-padded-x-small

.slds-grid_pull-padded-x-small — Normalizes the 0.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_x-small`

.slds-grid_pull-padded-small

.slds-grid_pull-padded-small — Normalizes the 0.75rem of padding when nesting a grid in a region with `.slds-p-horizontal_small`

.slds-grid_pull-padded-medium

.slds-grid_pull-padded-medium — Normalizes the 1rem of padding when nesting a grid in a region with `.slds-p-horizontal_medium`

.slds-grid_pull-padded-large

.slds-grid_pull-padded-large — Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_large`

.slds-grid_pull-padded-x-large

.slds-grid_pull-padded-x-large — Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_x-large`

.slds-grid_pull-padded-xx-large

.slds-grid_pull-padded-xx-large — Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_xx-large`

.slds-col

.slds-col — Initializes a grid column

.slds-has-flexi-truncate

.slds-has-flexi-truncate — Needed when truncation is nested in a flexible container in a grid

.slds-no-flex

.slds-no-flex — Removes flexbox from grid column

.slds-no-space

.slds-no-space — Sets the column to a min-width of 0

.slds-grow

.slds-grow — Allows column to grow to children’s content

.slds-grow-none

.slds-grow-none — Prevents column from growing to children’s content

.slds-shrink

.slds-shrink — Allows column to shrink to children's content

.slds-shrink-none

.slds-shrink-none — Prevents column from shrinking to children's content

.slds-grid_align-center

.slds-grid_align-center — Columns align in the center to the main axis and expand in each direction

.slds-grid_align-space

.slds-grid_align-space — Columns are evenly distributed with equal space around them all

.slds-grid_align-spread

.slds-grid_align-spread — Columns align to the left and right followed by center. Space is equal between them

.slds-grid_align-end

.slds-grid_align-end — Columns start on the opposite end of the grid's main axis

.slds-grid_vertical-align-start

.slds-grid_vertical-align-start — Columns start at the beginning of the grid's cross axis

.slds-grid_vertical-align-center

.slds-grid_vertical-align-center — Columns align in the center to the cross axis and expand it each direction

.slds-grid_vertical-align-end

.slds-grid_vertical-align-end — Columns start on the opposite end of the grid's cross axis

.slds-col_bump-top

.slds-col_bump-top — Bumps grid item(s) away from the other grid items to sit at the top, taking up the remaining white-space of the grid container

.slds-col_bump-right

.slds-col_bump-right — Bumps grid item(s) away from the other grid items to sit to the right, taking up the remaining white-space of the grid container

.slds-col_bump-bottom

.slds-col_bump-bottom — Bumps grid item(s) away from the other grid items to sit at the bottom, taking up the remaining white-space of the grid container

.slds-col_bump-left

.slds-col_bump-left — Bumps grid item(s) away from the other grid items to sit to the left, taking up the remaining white-space of the grid container

.slds-grid_vertical-stretch

.slds-grid_vertical-stretch — Stretch the grid items for both single row and multi-line rows to fill the height of the parent grid container

.slds-container_small

.slds-container_small — Restrict width of containers to a maximum of 480px

.slds-container_medium

.slds-container_medium — Restrict width of containers to a maximum of 768px

.slds-container_large

.slds-container_large — Restrict width of containers to a maximum of 1024px

.slds-container_x-large

.slds-container_x-large — Restrict width of containers to a maximum of 1280px

.slds-container_fluid

.slds-container_fluid — Width of container takes up 100% of viewport

.slds-container_center

.slds-container_center — Horizontally positions containers in the center of the viewport

.slds-container_left

.slds-container_left — Horizontally positions containers to the left of the viewport

.slds-container_right

.slds-container_right — Horizontally positions containers to the right of the viewport

.slds-grid_overflow

.slds-grid_overflow — Creates an overflow grid that allows horizontal scrolling