ion-col
Columns are cellular components of the
See Grid Layout for more information.
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. |
Properties
offset | |
|---|---|
| Description | The amount to offset the column, in terms of how many columns it should shift to the end of the total available. |
| Attribute | offset |
| Type | string | undefined |
offsetLg | |
| Description | The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available. |
| Attribute | offset-lg |
| Type | string | undefined |
offsetMd | |
| Description | The amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available. |
| Attribute | offset-md |
| Type | string | undefined |
offsetSm | |
| Description | The amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available. |
| Attribute | offset-sm |
| Type | string | undefined |
offsetXl | |
| Description | The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available. |
| Attribute | offset-xl |
| Type | string | undefined |
offsetXs | |
| Description | The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available. |
| Attribute | offset-xs |
| Type | string | undefined |
pull | |
| Description | The amount to pull the column, in terms of how many columns it should shift to the start of the total available. |
| Attribute | pull |
| Type | string | undefined |
pullLg | |
| Description | The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available. |
| Attribute | pull-lg |
| Type | string | undefined |
pullMd | |
| Description | The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available. |
| Attribute | pull-md |
| Type | string | undefined |
pullSm | |
| Description | The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available. |
| Attribute | pull-sm |
| Type | string | undefined |
pullXl | |
| Description | The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available. |
| Attribute | pull-xl |
| Type | string | undefined |
pullXs | |
| Description | The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available. |
| Attribute | pull-xs |
| Type | string | undefined |
push | |
| Description | The amount to push the column, in terms of how many columns it should shift to the end of the total available. |
| Attribute | push |
| Type | string | undefined |
pushLg | |
| Description | The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available. |
| Attribute | push-lg |
| Type | string | undefined |
pushMd | |
| Description | The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available. |
| Attribute | push-md |
| Type | string | undefined |
pushSm | |
| Description | The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available. |
| Attribute | push-sm |
| Type | string | undefined |
pushXl | |
| Description | The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available. |
| Attribute | push-xl |
| Type | string | undefined |
pushXs | |
| Description | The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available. |
| Attribute | push-xs |
| Type | string | undefined |
size | |
| Description | The size of the column, in terms of how many columns it should take up out of the total
available. If
|
| Attribute | size |
| Type | string | undefined |
sizeLg | |
| Description | The size of the column for lg screens, in terms of how many columns it should take up out
of the total available. If
|
| Attribute | size-lg |
| Type | string | undefined |
sizeMd | |
| Description | The size of the column for md screens, in terms of how many columns it should take up out
of the total available. If
|
| Attribute | size-md |
| Type | string | undefined |
sizeSm | |
| Description | The size of the column for sm screens, in terms of how many columns it should take up out
of the total available. If
|
| Attribute | size-sm |
| Type | string | undefined |
sizeXl | |
| Description | The size of the column for xl screens, in terms of how many columns it should take up out
of the total available. If
|
| Attribute | size-xl |
| Type | string | undefined |
sizeXs | |
| Description | The size of the column for xs screens, in terms of how many columns it should take up out
of the total available. If
|
| Attribute | size-xs |
| Type | string | undefined |
CSS Custom Properties
| Name | Description |
|---|---|
--ion-grid-column-padding | Padding for the Column |
--ion-grid-column-padding-lg | Padding for the Column on lg screens and up |
--ion-grid-column-padding-md | Padding for the Column on md screens and up |
--ion-grid-column-padding-sm | Padding for the Column on sm screens and up |
--ion-grid-column-padding-xl | Padding for the Column on xl screens and up |
--ion-grid-column-padding-xs | Padding for the Column on xs screens and up |
--ion-grid-columns | The number of total Columns in the Grid |