mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
ecc2c55370
* docs(all): possible values are extracted by stencil * add defaults * remove all hardcoded defaults * update stencil
ion-grid
The grid is a powerful mobile-first flexbox system for building custom layouts.
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 | Default |
|---|---|---|---|---|
fixed |
fixed |
If true, the grid will have a fixed width based on the screen size. |
boolean |
false |
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