Col
The Col (column) component is the basic building block of Grid and allows you to horizontally arrange content and adjust its layout based on the screen size. It is used by adding it inside the Row element.
Note
For more information on using Col, navigate to the system documentation Grid.
Attributes and Properties
offset
| Description | The number of columns by which the column should be shifted. |
| Attribute | offset |
| Type | string ｜ undefined |
| Default | undefined |
offsetLg
| Description | The number of columns by which the column is to be shifted on screens of size lg. |
| Attribute | offset-lg |
| Type | string ｜ undefined |
| Default | undefined |
offsetMd
| Description | The number of columns by which the column is to be shifted on screens of size md. |
| Attribute | offset-md |
| Type | string ｜ undefined |
| Default | undefined |
offsetSm
| Description | The number of columns by which the column is to be shifted on screens of size sm. |
| Attribute | offset-sm |
| Type | string ｜ undefined |
| Default | undefined |
offsetXl
| Description | The number of columns by which the column should be shifted on xl size screens. |
| Attribute | offset-xl |
| Type | string ｜ undefined |
| Default | undefined |
offsetXs
| Description | The number of columns by which the column is to be shifted on screens of size xs. |
| Attribute | offset-xs |
| Type | string ｜ undefined |
| Default | undefined |
offsetXs
| Description | The number of columns by which the column is to be shifted on screens of size xs. |
| Attribute | offset-xs |
| Type | string ｜ undefined |
| Default | undefined |
order
| Description | Sets the column order in the row by adding the values 1 to 5, "first" and "last" |
| Attribute | order |
| Type | string ｜ undefined |
| Default | undefined |
size
| Description | Sets the column size in terms of how many columns it should occupy out of the total number of available columns. If "auto" is specified, the column will be the size of its contents. |
| Attribute | size |
| Type | string ｜ undefined |
| Default | undefined |
sizeLg
| Description | Sets the column size on lg size screens in terms of how many columns it should occupy out of the total number of available columns. If "auto" is specified, the column will be the size of its contents. |
| Attribute | size-lg |
| Type | string ｜ undefined |
| Default | undefined |
sizeMd
| Description | Sets the column size on md size screens in terms of how many columns to take up out of the total number of available columns. If "auto" is specified, the column will be the size of its contents. |
| Attribute | size-md |
| Type | string ｜ undefined |
| Default | undefined |
sizeSm
| Description | Sets the column size on sm size screens in terms of how many columns to take up out of the total number of available columns. If "auto" is specified, the column will be the size of its contents. |
| Attribute | size-sm |
| Type | string ｜ undefined |
| Default | undefined |
sizeXl
| Description | Sets the column size on xl sized screens in terms of how many columns it should occupy out of the total number of available columns. If "auto" is specified, the column will be the size of its contents. |
| Attribute | size-xl |
| Type | string ｜ undefined |
| Default | undefined |
sizeXs
| Description | Sets the column size on xs sized screens in terms of how many columns it should occupy out of the total number of available columns. If "auto" is specified, the column will be the size of its contents. |
| Attribute | size-xs |
| Type | string ｜ undefined |
| 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
No CSS custom properties available for this component.
Slots
No slots available for this component.