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 Wrapper

To use the grid system, add the class `slds-grid` 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 <em>not</em> an all or nothing solution.

Adding the class `slds-wrap` causes the flow of your `slds-col` 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 `slds-grid` element. To stack your columns vertically instead of their default row behavior, use `slds-grid--vertical`. You can also reverse the left to right behavior by adding `slds-grid--reverse` or top to bottom by adding `slds-grid--vertical-reverse`.

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 `slds-grid--frame`. An assortment of `slds-container` classes are available to contain your grids.

#### Grid Items (Regions/Colums)

When you add the class `slds-col` 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 `slds-p-horizontal--small`, `slds-p-horizontal--medium`, `slds-p-horizontal--large`, `slds-p-around--small`, `slds-p-around--medium` or `slds-p-around--large`. 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 <a href="/utilities/sizing/">sizing classes</a> 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 &ndash;2, 3, 4, 5, 6, 7, 8 and 12. The grid supports up to 12 columns.

#### Visual Glossary of Terminology

![](/assets/images/grid/grid-flex-diagram.svg)

Allows columns to wrap when they exceed 100% of their parent’s width

Keeps columns on one line. Allows columns to stretch and fill 100% of the parent&rsquo;s width and height.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Needed when truncation is nested in a flexible container in a grid

Allows column to grow to children&rsquo;s content

Prevents column from growing to children&rsquo;s content

Allows column to shrink to children's content

Prevents column from shrinking to children's content

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

Columns are evenly distributed with equal space around them all

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

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

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

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

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

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

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

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

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

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

Restrict width of containers to a maximum of 480px

Restrict width of containers to a maximum of 768px

Restrict width of containers to a maximum of 1024px

Restrict width of containers to a maximum of 1280px

Width of container takes up 100% of viewport

Horizontally positions containers in the center of the viewport

Horizontally positions containers to the left of the viewport

Horizontally positions containers to the right of the viewport

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.

To apply gutters between each grid item, the following spacing classes are available to add your intended gutters, `.slds-p-horizontal_small`, `.slds-p-horizontal_medium`, `.slds-p-horizontal_large`, `.slds-p-around_small`, `.slds-p-around_medium` and `.slds-p-around_large`. You may need to pull the grid items back to their original grid boundaries of the grid container, apply the classes `.slds-grid_pull-padded`, `.slds-grid_pull-padded-medium` or `.slds-grid_pull-padded-large` to the `.slds-grid`.

If you need to set explicit widths to your grid items, apply the sizing classes to your grid items. Check out [sizing helpers here](/utilities/sizing).

If you want your columns to grow from the the center of the main (horizontal) axis, apply the class `slds-grid_align-center`.

To evenly distribute columns on the main axis with an equal amount of white space separating the columns, apply the class `slds-grid_align-space`.

To specify the vertical placement of grid items on the cross axis, you can apply `.slds-align-top`, `.slds-align-middle`, and `.slds-align-bottom` to a grid item. Note, to vertically align elements on a cross-axis of a `.slds-grid`, the elements need available vertical white space. This is usually achieved by having a height applied to the `.slds-grid`.

By default, grid items extend vertically unless `.slds-wrap` is applied to your parent grid container or you have multiple rows. If you have need multiple rows that stretch the height of the parent grid container, you can apply the class `.slds-grid_vertical-stretch`. Note, to vertically align elements on a cross-axis of a `.slds-grid`, the elements need available vertical white space. This is usually achieved by having a height applied to the `.slds-grid`.

To "bump" a single grid item or a grid item plus the precedding grid items that follow, apply the class `.slds-col_bump-{direction}`, with `{direction}` being either `left`, `right`, `top` or `bottom` to a grid item.

These helper classes visually reorder grid elements independently from their position in the markup.

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 `.slds-grid_frame`.

You can use the grid system&rsquo;s containers to constrain your content to a certain width. You can center or left or right align the containers within your viewport.