Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Col

ion-col, [ion-col]

Improve this doc

Columns are cellular components of the grid system and go inside of a row. They will expand to fill their row. All content within a grid should go inside of a column.

Column attributes

By default, columns will stretch to fill the entire height of the row. There are several attributes that can be added to a column to customize this behavior.

Property Description
align-self-start Adds align-self: flex-start. The column will be vertically aligned at the top.
align-self-center Adds align-self: center. The column will be vertically aligned in the center.
align-self-end Adds align-self: flex-end. The column will be vertically aligned at the bottom.
align-self-stretch Adds align-self: stretch. The column will be stretched to take up the entire height of the row.
align-self-baseline Adds align-self: baseline. The column will be vertically aligned at its baseline.

Sass Variables

All

Property Default Description
$grid-breakpoints ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px )

The minimum dimensions at which your layout will change, adapting to different screen sizes, for use in media queries

$grid-max-widths ( sm: 540px, md: 720px, lg: 960px, xl: 1140px )

Maximum width of the grid for different screen sizes

$grid-columns 12

Number of columns for the grid

$grid-padding-width 10px

Total width of the padding for the grid

$grid-padding-widths ( xs: $grid-padding-width, sm: $grid-padding-width, md: $grid-padding-width, lg: $grid-padding-width, xl: $grid-padding-width )

Padding for the columns for different screen sizes

API

Native

General