Grid

Grid

The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.

Grid: Column Stretch

Preview

No content has been added for this component.

No content has been added for this component.

Column Stretch

By default, the grid items within a .slds-grid do not stretch to take up that available white-space on the main axis. Apply .slds-col to a grid item, it will stretch across the main axis. The width of each grid item will be determined by the content within that region.


About Grid

Grid Wrapper

To use the grid system, add the class to an element, component, or page layout. Each grid is independent of other nested grids. You can limit attributes of each grid to specific regions in the app. A grid style is not an all or nothing solution.

Adding the class causes the flow of your elements to wrap when they exceed 100% of their parent’s width.

You can easily change the flow direction of your grid by adding a modifier class to the element. To stack your columns vertically instead of their default row behavior, use . You can also reverse the left to right behavior by adding or top to bottom by adding .

If you want your application to fill 100% of the width and height of the viewport and nest other grids inside, use the top-level app helper class . An assortment of classes are available to contain your grids.

Grid Items (Regions/Colums)

When you add the class to the grid items, no padding or gutters are added. They are simply divisions of their parent. If you want gutters, add one of the spacing utility classes such as , , , , or . These will add different sized gutters to the left and right side of your column.

By default, the width of each column within a grid row is determined by the content within. Though this automatic sizing allows you to achieve most desired outcomes, you can add manual sizing classes to the columns if you need specific column widths.

Using the manual sizing class helpers, you can specify a column span across the following grids –2, 3, 4, 5, 6, 7, 8 and 12. The grid supports up to 12 columns.

Visual Glossary of Terminology


Overview of CSS Classes

Selector.slds-grid
Summary

Initializes grid

Restrict*
ModifierTrue
Selector.slds-grid_frame
Summary

Initializes grid

Restrict*
ModifierTrue
Selector.slds-grid_vertical
Summary

Initializes grid

Restrict*
ModifierTrue
Selector.slds-grid_vertical-reverse
Summary

Initializes grid

Restrict*
ModifierTrue
Selector.slds-grid_reverse
Summary

Initializes grid

Restrict*
ModifierTrue
Selector.slds-grid_pull-padded
Summary

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

Restrict*
ModifierTrue
Selector.slds-grid_pull-padded-xxx-small
Summary

Normalizes the 0.125rem of padding when nesting a grid in a region with .slds-p-horizontal_xxx-small

Restrict*
ModifierTrue
Selector.slds-grid_pull-padded-xx-small
Summary

Normalizes the 0.25rem of padding when nesting a grid in a region with .slds-p-horizontal_xx-small

Restrict*
ModifierTrue
Selector.slds-grid_pull-padded-x-small
Summary

Normalizes the 0.5rem of padding when nesting a grid in a region with .slds-p-horizontal_x-small

Restrict*
ModifierTrue
Selector.slds-grid_pull-padded-small
Summary

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

Restrict*
ModifierTrue
Selector.slds-grid_pull-padded-medium
Summary

Normalizes the 1rem of padding when nesting a grid in a region with .slds-p-horizontal_medium

Restrict*
ModifierTrue
Selector.slds-grid_pull-padded-large
Summary

Normalizes the 1.5rem of padding when nesting a grid in a region with .slds-p-horizontal_large

Restrict*
ModifierTrue
Selector.slds-grid_align-center
Summary

Columns align in the center to the main axis and expand in each direction

Restrict*
ModifierTrue
Selector.slds-grid_align-space
Summary

Columns are evenly distributed with equal space around them all

Restrict*
ModifierTrue
Selector.slds-grid_align-spread
Summary

Columns align to the left and right followed by center. Space is equal between them

Restrict*
ModifierTrue
Selector.slds-grid_align-end
Summary

Columns start on the opposite end of the grid's main axis

Restrict*
ModifierTrue
Selector.slds-grid_vertical-align-start
Summary

Columns start at the beginning of the grid's cross axis

Restrict*
ModifierTrue
Selector.slds-grid_vertical-align-center
Summary

Columns align in the center to the cross axis and expand it each direction

Restrict*
ModifierTrue
Selector.slds-grid_vertical-align-end
Summary

Columns start on the opposite end of the grid's cross axis

Restrict*
ModifierTrue
Selector.slds-grid_vertical-stretch
Summary

Stretch the grid items for both single row and multi-line rows to fill the height of the parent grid container

Restrict*
ModifierTrue