Col
ion-col, [ion-col]
ion-col, [ion-col]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 |