Grid System | Life Time | Core Design Guidelines

The Core grid system is based off of Bootstrap 4, with 12 columns over 5 seperately defined breakpoints.

How it Works

There are three major components—containers, rows, and columns:

Containers—.container for 100% width up to the XL breakpoint or .container-fluid for full width—center your site’s contents and help align your grid content.
Regardless of container type, within it a .row is required to surround all columns.
Content should be placed within columns, and only columns may be immediate children of rows.

Columns are named in a systemic way, to allow them to occupy different percentages of space at different breakpoints. They all begin with the .col- designation, and the next portions define the breakpoint where it is first applied, and a numeric used to control the width percentage.

Breakpoints

Column breakpoints are additive, meaning they apply to the breakpoint specified and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large window sizes):

	Extra small <544px	Small ≥544px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`

Column Width

Column width is determined as a fraction of the 12 columns per row, where the percentage width of a .col-xx-n class is evaluated as n/12. So if you want three equal-width columns, you’d use .col-xs-4.

Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
Columns have 1rem padding on each side to create the gutters between individual columns for a total gutter width of 2rem.

Grid Demo(external link)

Usage

Rules

Use the grid to constrain and align content at different breakpoints

Constraints

When using the .edge-* modifier classes if grids are nested within the element, it will break the grid alignment and cause negative margin issues. For those reasons, if a container contains a grid place these utilities on the column elements, not the container element. Also take great care to only remove the left or right padding in cases with multiple columns, as removing interior gutter spaces could also throw off alignment.

Principles

A grid is used to layout the content of a page in meaningful and consistent ways that are appropriate for variations in responsive layouts and available viewport space

Accessibility

When using the .col-xx-push-*, .col-xx-pull-*, .col-xx-first or .col-xx-last modifier classes to visually reorder columns, ensure that the content still has a logical and understandable flow in the DOM for screen readers

Class Names

container Required	Use on the `<div>` that contains rows and columns. A container is 100% width up until the XL breakpoint You can have multiple containers on a page, but a container does not need to be used for nested grids. (Not required if `.container-fluid` is used instead)
container-fluid Modifier	Use on the `<div>` that contains rows and columns. A fluid container does not have any width constraints. (Required if `.container` is not used)
row Required	Use on the first nested `<div>` within a container to surround all columns
*col--#** Required	A `.col--#` must be inside a `.row` and the number of columns should add up to the amount set for the grid. If more columns than the grid is set for are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. The center `` portion is the breakpoint you want the column width to change. The last `#` portion is the width of the column you desire at that breakpoint.
*col--offset-#** Modifier	Offset columns to the right. Use with the required column classes. This is handy when the number of columns does not add up to the amount set for the grid. The center `*` portion is the breakpoint you want the offset to occur at. The last `#` portion is the number of columns you want the column to shift to the right.
*col--push-#** Modifier	Push columns to the right to visually reorder them. Use with the required column classes and `.col-xx-pull-`. The center `` portion is the breakpoint you want the push to occur at. The last `#` portion is the number of columns you want the column pushed to the right.
*col--pull-#** Modifier	Pull columns to the left to visually reorder them. Use with the required column classes and `.col-xx-push-`. The center `` portion is the breakpoint you want the pull to occur at. The last `#` portion is the number of columns you want the column pulled to the left.
*col--first** Modifier	Visually change the order of the column within a row where the `*` is the breakpoint you want the order to change. Use with the required column classes.
*col--last** Modifier	Visually change the order of the column within a row where the `*` is the breakpoint you want the order to change. Use with the required column classes.
*row--top** Modifier	Use with `.row` when using the flexbox version of the grid to align columns to the top of the row. The center `*` portion is the breakpoint you want the alignment to occur at.
*row--center** Modifier	Use with `.row` when using the flexbox version of the grid to align columns to the center of the row. The center `*` portion is the breakpoint you want the alignment to occur at.
*row--bottom** Modifier	Use with `.row` when using the flexbox version of the grid to align columns to the bottom of the row. The center `*` portion is the breakpoint you want the alignment to occur at.
*row--baseline** Modifier	Use with `.row` when using the flexbox version of the grid to align columns to the baseline of the items within the row. The center `*` portion is the breakpoint you want the alignment to occur at.
*col--top** Modifier	Use with the required column classes when using the flexbox version of the grid to align an individual column to the top of the row. The center `*` portion is the breakpoint you want the alignment to occur at.
*col--center** Modifier	Use with the required column classes when using the flexbox version of the grid to align an individual column to the center of the row. The center `*` portion is the breakpoint you want the alignment to occur at.
*col--bottom** Modifier	Use with the required column classes when using the flexbox version of the grid to align an individual column to the bottom of the row. The center `*` portion is the breakpoint you want the alignment to occur at.
*edge--up** Modifier	Remove both left and right padding (gutter space) on either a `.container` or a `.col--` at this breakpoint and up. The center `*` portion is the breakpoint you want the edge modifier to occur at.
*edge-l--up** Modifier	Remove the left padding (gutter space) on either a `.container` or a `.col--` at this breakpoint and up. The center `*` portion is the breakpoint you want the edge modifier to occur at.
*edge-r--up** Modifier	Remove the right padding (gutter space) on either a `.container` or a `.col--` at this breakpoint and up. The center `*` portion is the breakpoint you want the edge modifier to occur at.
*edge--down** Modifier	Remove both left and right padding (gutter space) on either a `.container` or a `.col--` at this breakpoint and down. The center `*` portion is the breakpoint you want the edge modifier to occur at.
*edge-l--down** Modifier	Remove the left padding (gutter space) on either a `.container` or a `.col--` at this breakpoint and down. The center `*` portion is the breakpoint you want the edge modifier to occur at.
*edge-r--down** Modifier	Remove the right padding (gutter space) on either a `.container` or a `.col--` at this breakpoint and down. The center `*` portion is the breakpoint you want the edge modifier to occur at.

Last updated May 2, 2018
Authorable - Yes
Core - Grid System