Skip to main content

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.

See Grid Layout for more information.

Column Alignment#

By default, columns will stretch to fill the entire height of the row. Columns are flex items, so there are several CSS classes that can be applied to a column to customize this behavior.

Properties#

offset#

DescriptionThe amount to offset the column, in terms of how many columns it should shift to the end
of the total available.
Attributeoffset
Typestring \| undefined
Defaultundefined

offsetLg#

DescriptionThe amount to offset the column for lg screens, in terms of how many columns it should shift
to the end of the total available.
Attributeoffset-lg
Typestring \| undefined
Defaultundefined

offsetMd#

DescriptionThe amount to offset the column for md screens, in terms of how many columns it should shift
to the end of the total available.
Attributeoffset-md
Typestring \| undefined
Defaultundefined

offsetSm#

DescriptionThe amount to offset the column for sm screens, in terms of how many columns it should shift
to the end of the total available.
Attributeoffset-sm
Typestring \| undefined
Defaultundefined

offsetXl#

DescriptionThe amount to offset the column for xl screens, in terms of how many columns it should shift
to the end of the total available.
Attributeoffset-xl
Typestring \| undefined
Defaultundefined

offsetXs#

DescriptionThe amount to offset the column for xs screens, in terms of how many columns it should shift
to the end of the total available.
Attributeoffset-xs
Typestring \| undefined
Defaultundefined

pull#

DescriptionThe amount to pull the column, in terms of how many columns it should shift to the start of
the total available.
Attributepull
Typestring \| undefined
Defaultundefined

pullLg#

DescriptionThe amount to pull the column for lg screens, in terms of how many columns it should shift
to the start of the total available.
Attributepull-lg
Typestring \| undefined
Defaultundefined

pullMd#

DescriptionThe amount to pull the column for md screens, in terms of how many columns it should shift
to the start of the total available.
Attributepull-md
Typestring \| undefined
Defaultundefined

pullSm#

DescriptionThe amount to pull the column for sm screens, in terms of how many columns it should shift
to the start of the total available.
Attributepull-sm
Typestring \| undefined
Defaultundefined

pullXl#

DescriptionThe amount to pull the column for xl screens, in terms of how many columns it should shift
to the start of the total available.
Attributepull-xl
Typestring \| undefined
Defaultundefined

pullXs#

DescriptionThe amount to pull the column for xs screens, in terms of how many columns it should shift
to the start of the total available.
Attributepull-xs
Typestring \| undefined
Defaultundefined

push#

DescriptionThe amount to push the column, in terms of how many columns it should shift to the end
of the total available.
Attributepush
Typestring \| undefined
Defaultundefined

pushLg#

DescriptionThe amount to push the column for lg screens, in terms of how many columns it should shift
to the end of the total available.
Attributepush-lg
Typestring \| undefined
Defaultundefined

pushMd#

DescriptionThe amount to push the column for md screens, in terms of how many columns it should shift
to the end of the total available.
Attributepush-md
Typestring \| undefined
Defaultundefined

pushSm#

DescriptionThe amount to push the column for sm screens, in terms of how many columns it should shift
to the end of the total available.
Attributepush-sm
Typestring \| undefined
Defaultundefined

pushXl#

DescriptionThe amount to push the column for xl screens, in terms of how many columns it should shift
to the end of the total available.
Attributepush-xl
Typestring \| undefined
Defaultundefined

pushXs#

DescriptionThe amount to push the column for xs screens, in terms of how many columns it should shift
to the end of the total available.
Attributepush-xs
Typestring \| undefined
Defaultundefined

size#

DescriptionThe size of the column, in terms of how many columns it should take up out of the total
available. If "auto" is passed, the column will be the size of its content.
Attributesize
Typestring \| undefined
Defaultundefined

sizeLg#

DescriptionThe size of the column for lg screens, in terms of how many columns it should take up out
of the total available. If "auto" is passed, the column will be the size of its content.
Attributesize-lg
Typestring \| undefined
Defaultundefined

sizeMd#

DescriptionThe size of the column for md screens, in terms of how many columns it should take up out
of the total available. If "auto" is passed, the column will be the size of its content.
Attributesize-md
Typestring \| undefined
Defaultundefined

sizeSm#

DescriptionThe size of the column for sm screens, in terms of how many columns it should take up out
of the total available. If "auto" is passed, the column will be the size of its content.
Attributesize-sm
Typestring \| undefined
Defaultundefined

sizeXl#

DescriptionThe size of the column for xl screens, in terms of how many columns it should take up out
of the total available. If "auto" is passed, the column will be the size of its content.
Attributesize-xl
Typestring \| undefined
Defaultundefined

sizeXs#

DescriptionThe size of the column for xs screens, in terms of how many columns it should take up out
of the total available. If "auto" is passed, the column will be the size of its content.
Attributesize-xs
Typestring \| undefined
Defaultundefined

CSS Custom Properties#

NameDescription
--ion-grid-column-paddingPadding for the Column
--ion-grid-column-padding-lgPadding for the Column on lg screens and up
--ion-grid-column-padding-mdPadding for the Column on md screens and up
--ion-grid-column-padding-smPadding for the Column on sm screens and up
--ion-grid-column-padding-xlPadding for the Column on xl screens and up
--ion-grid-column-padding-xsPadding for the Column on xs screens and up
--ion-grid-columnsThe number of total Columns in the Grid