Grid

ion-grid, [ion-grid]

The grid is a powerful mobile-first flexbox system for building custom layouts.
It is heavily influenced by Bootstrap's grid system.

The grid is composed of three units — a grid, row(s) and column(s). Columns will expand to fill their
row, and will resize to fit additional columns. It is based on a 12 column layout with different
breakpoints based on the screen size. The number of columns and breakpoints can be fully customized
using Sass.

How it works

The grid is a mobile-first system made up of any number of rows and columns.
It is built with flexbox making it extremely responsive. The components that
make up the grid can be written as an element (e.g., <ion-grid>) or added as
an attribute to any element (e.g., <div ion-row>).

Here's how it works:

Grids act as a container for all rows and columns. Grids take up the full width of their container,
but adding the fixed attribute will specify the width per screen size, see grid size below.

Rows are horizontal groups of columns that line the columns up properly.

Content should be placed within columns, and only columns may be immediate children of rows.

Grid columns without a specified width will automatically have equal widths.
For example, four instances of col-sm will each automatically be 25% wide for small breakpoints.

Column attributes indicate the number of columns to use out of the default 12 per row.
So, col-4 can be added in order to have three equal-width columns.

Column widths are set as a percentage, so they’re always fluid and sized relative to their parent element.

Columns have padding between individual columns, however, the padding can be removed from the grid and
columns by adding no-padding on the grid.

There are five grid tiers by default, one for each responsive breakpoint: all breakpoints (extra small),
small, medium, large, and extra large.

Grid tiers are based on minimum widths, meaning they apply to their tier and all those larger than it
(e.g., col-sm-4 applies to small, medium, large, and extra large devices).

Grid size

By default, the grid will take up 100% width. To set a maximum width based on the screen
size add the fixed attribute. The maximum width of the grid for each breakpoint is defined
in the $grid-max-widths Sass variable. For more information, see
customizing the grid.

Name

Value

Description

xs

auto

Don't set the grid width for xs screens

sm

540px

Set grid width to 540px when (min-width: 576px)

md

720px

Set grid width to 720px when (min-width: 768px)

lg

960px

Set grid width to 960px when (min-width: 992px)

xl

1140px

Set grid width to 1140px when (min-width: 1200px)

Grid attributes

The grid takes up full width and has padding added to it based on the screen size. There are two
attributes that can be used to adjust this behavior.

Property

Description

no-padding

Removes padding from the grid and immediate children columns.

fixed

Set a max width based on the screen size.

Default breakpoints

The default breakpoints are defined by the $grid-breakpoints Sass variable. It can be
customized to use different values for the breakpoint, rename and add/remove breakpoints.
For more information, see customizing the grid.

Name

Value

Width Prefix

Offset Prefix

Push Prefix

Pull Prefix

Description

xs

0

col-

offset-

push-

pull-

Set columns when (min-width: 0)

sm

576px

col-sm-

offset-sm-

push-sm-

pull-sm-

Set columns when (min-width: 576px)

md

768px

col-md-

offset-md-

push-md-

pull-md-

Set columns when (min-width: 768px)

lg

992px

col-lg-

offset-lg-

push-lg-

pull-lg-

Set columns when (min-width: 992px)

xl

1200px

col-xl-

offset-xl-

push-xl-

pull-xl-

Set columns when (min-width: 1200px)

Note: the first breakpoint must have the value set to 0 and all breakpoint values must be in
ascending order.

Set the width of one column and the others will automatically resize around it.
This can be done using our predefined grid attributes. In the example below,
the other columns will resize no matter the width of the center column.

Using the col-{breakpoint}-auto attributes, the column can size itself based on the
natural width of its content. This is extremely useful for setting a column width
using pixels. The columns next to the variable-width column will resize to fill the row.

Reordering

Move columns to the right by adding the offset-* attributes. These attributes
increase the margin start of the column by * columns. For example, in the following
grid the last column will be offset by 3 columns and take up 3 columns:

Reorder the columns by adding the push-* and pull-* attributes. These attributes
adjust the left and right of the columns by * columns making it easy to reorder
columns. For example, in the following grid the column with the 1st col description
will actually be the last column and the 2nd col will be the first column.

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize
the predefined grid attributes. Change the number of breakpoints, the media query values,
the number of columns, and more.

The number of grid columns and their padding can be modified via Sass variables.
$grid-columns is used to generate the widths (in percent) of each individual column.
$grid-padding-width is used for the padding on the grid, while $grid-padding-widths
allows breakpoint-specific widths that are divided evenly across padding-left and
padding-right as well as padding-top and padding-bottom of the grid and columns.