ion-col

shadow

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

Refer to the grid documentation 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

mode

Description	The mode determines the platform behaviors of the component. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

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
Default	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
Default	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
Default	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
Default	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
Default	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
Default	undefined

order

Description	The order of the column, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
Attribute	order
Type	string ｜ undefined
Default	undefined

orderLg

Description	The order of the column for lg screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
Attribute	order-lg
Type	string ｜ undefined
Default	undefined

orderMd

Description	The order of the column for md screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
Attribute	order-md
Type	string ｜ undefined
Default	undefined

orderSm

Description	The order of the column for sm screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
Attribute	order-sm
Type	string ｜ undefined
Default	undefined

orderXl

Description	The order of the column for xl screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
Attribute	order-xl
Type	string ｜ undefined
Default	undefined

orderXs

Description	The order of the column for xs screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
Attribute	order-xs
Type	string ｜ undefined
Default	undefined

pull (deprecated)

Description	The amount to pull the column, in terms of how many columns it should shift to the start of the total available. Deprecated — Use the combination of size and order properties to achieve the same effect.
Attribute	pull
Type	string ｜ undefined
Default	undefined

pullLg (deprecated)

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. Deprecated — Use the combination of size and order properties to achieve the same effect.
Attribute	pull-lg
Type	string ｜ undefined
Default	undefined

pullMd (deprecated)

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. Deprecated — Use the combination of size and order properties to achieve the same effect.
Attribute	pull-md
Type	string ｜ undefined
Default	undefined

pullSm (deprecated)

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. Deprecated — Use the combination of size and order properties to achieve the same effect.
Attribute	pull-sm
Type	string ｜ undefined
Default	undefined

pullXl (deprecated)

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. Deprecated — Use the combination of size and order properties to achieve the same effect.
Attribute	pull-xl
Type	string ｜ undefined
Default	undefined

pullXs (deprecated)

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. Deprecated — Use the combination of size and order properties to achieve the same effect.
Attribute	pull-xs
Type	string ｜ undefined
Default	undefined

push (deprecated)

Description	The amount to push the column, in terms of how many columns it should shift to the end of the total available. Deprecated — Use the combination of size and order properties to achieve the same effect.
Attribute	push
Type	string ｜ undefined
Default	undefined

pushLg (deprecated)

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. Deprecated — Use the combination of size and order properties to achieve the same effect.
Attribute	push-lg
Type	string ｜ undefined
Default	undefined

pushMd (deprecated)

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. Deprecated — Use the combination of size and order properties to achieve the same effect.
Attribute	push-md
Type	string ｜ undefined
Default	undefined

pushSm (deprecated)

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. Deprecated — Use the combination of size and order properties to achieve the same effect.
Attribute	push-sm
Type	string ｜ undefined
Default	undefined

pushXl (deprecated)

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. Deprecated — Use the combination of size and order properties to achieve the same effect.
Attribute	push-xl
Type	string ｜ undefined
Default	undefined

pushXs (deprecated)

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. Deprecated — Use the combination of size and order properties to achieve the same effect.
Attribute	push-xs
Type	string ｜ undefined
Default	undefined

size

Description	The 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.
Attribute	size
Type	string ｜ undefined
Default	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 "auto" is passed, the column will be the size of its content.
Attribute	size-lg
Type	string ｜ undefined
Default	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 "auto" is passed, the column will be the size of its content.
Attribute	size-md
Type	string ｜ undefined
Default	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 "auto" is passed, the column will be the size of its content.
Attribute	size-sm
Type	string ｜ undefined
Default	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 "auto" is passed, the column will be the size of its content.
Attribute	size-xl
Type	string ｜ undefined
Default	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 "auto" is passed, the column will be the size of its content.
Attribute	size-xs
Type	string ｜ undefined
Default	undefined

theme

Description	The theme determines the visual appearance of the component. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attribute	theme
Type	"ios" ｜ "md" ｜ "ionic"
Default	undefined

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

Name	Description
--col-unit-size	The size of each Column unit.
--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

Slots

No slots available for this component.