It is composed of three units — a grid, row(s) and column(s). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.

See Grid Layout for more information.

Properties

Property	Attribute	Description	Type
`fixed`	`fixed`	If true, the grid will have a fixed width based on the screen size. Defaults to `false`.	`boolean`

CSS Custom Properties

Name	Description
`--ion-grid-padding`	Padding for the Grid
`--ion-grid-padding-lg`	Padding for the Grid on lg screens
`--ion-grid-padding-md`	Padding for the Grid on md screens
`--ion-grid-padding-sm`	Padding for the Grid on sm screens
`--ion-grid-padding-xl`	Padding for the Grid on xl screens
`--ion-grid-padding-xs`	Padding for the Grid on xs screens
`--ion-grid-width`	Width of the fixed Grid
`--ion-grid-width-lg`	Width of the fixed Grid on lg screens
`--ion-grid-width-md`	Width of the fixed Grid on md screens
`--ion-grid-width-sm`	Width of the fixed Grid on sm screens
`--ion-grid-width-xl`	Width of the fixed Grid on xl screens
`--ion-grid-width-xs`	Width of the fixed Grid on xs screens

Built with StencilJS