ion-grid
Contents
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 the Responsive Grid documentation for more information.
Usage#
- Angular
- Javascript
- React
- Stencil
- Vue
<ion-grid> <ion-row> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> </ion-row>
<ion-row> <ion-col size="6"> ion-col [size="6"] </ion-col> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> </ion-row>
<ion-row> <ion-col size="3"> ion-col [size="3"] </ion-col> <ion-col> ion-col </ion-col> <ion-col size="3"> ion-col [size="3"] </ion-col> </ion-row>
<ion-row> <ion-col size="3"> ion-col [size="3"] </ion-col> <ion-col size="3" offset="3"> ion-col [size="3"] [offset="3"] </ion-col> </ion-row>
<ion-row> <ion-col> ion-col </ion-col> <ion-col> ion-col <br># </ion-col> <ion-col> ion-col <br># <br># </ion-col> <ion-col> ion-col <br># <br># <br># </ion-col> </ion-row>
<ion-row> <ion-col class="ion-align-self-start"> ion-col [start] </ion-col> <ion-col class="ion-align-self-center"> ion-col [center] </ion-col> <ion-col class="ion-align-self-end"> ion-col [end] </ion-col> <ion-col> ion-col <br># <br># </ion-col> </ion-row>
<ion-row class="ion-align-items-start"> <ion-col> [start] ion-col </ion-col> <ion-col> [start] ion-col </ion-col> <ion-col class="ion-align-self-end"> [start] ion-col [end] </ion-col> <ion-col> ion-col <br># <br># </ion-col> </ion-row>
<ion-row class="ion-align-items-center"> <ion-col> [center] ion-col </ion-col> <ion-col> [center] ion-col </ion-col> <ion-col> [center] ion-col </ion-col> <ion-col> ion-col <br># <br># </ion-col> </ion-row>
<ion-row class="ion-align-items-end"> <ion-col> [end] ion-col </ion-col> <ion-col class="ion-align-self-start"> [end] ion-col [start] </ion-col> <ion-col> [end] ion-col </ion-col> <ion-col> ion-col <br># <br># </ion-col> </ion-row>
<ion-row> <ion-col size="12" size-sm> ion-col [size="12"] [size-sm] </ion-col> <ion-col size="12" size-sm> ion-col [size="12"] [size-sm] </ion-col> <ion-col size="12" size-sm> ion-col [size="12"] [size-sm] </ion-col> <ion-col size="12" size-sm> ion-col [size="12"] [size-sm] </ion-col> </ion-row>
<ion-row> <ion-col size="12" size-md> ion-col [size="12"] [size-md] </ion-col> <ion-col size="12" size-md> ion-col [size="12"] [size-md] </ion-col> <ion-col size="12" size-md> ion-col [size="12"] [size-md] </ion-col> <ion-col size="12" size-md> ion-col [size="12"] [size-md] </ion-col> </ion-row>
<ion-row> <ion-col size="6" size-lg offset="3"> ion-col [size="6"] [size-lg] [offset="3"] </ion-col> <ion-col size="3" size-lg> ion-col [size="3"] [size-lg] </ion-col> </ion-row></ion-grid><ion-grid> <ion-row> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> </ion-row>
<ion-row> <ion-col size="6"> ion-col [size="6"] </ion-col> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> </ion-row>
<ion-row> <ion-col size="3"> ion-col [size="3"] </ion-col> <ion-col> ion-col </ion-col> <ion-col size="3"> ion-col [size="3"] </ion-col> </ion-row>
<ion-row> <ion-col size="3"> ion-col [size="3"] </ion-col> <ion-col size="3" offset="3"> ion-col [size="3"] [offset="3"] </ion-col> </ion-row>
<ion-row> <ion-col> ion-col </ion-col> <ion-col> ion-col <br># </ion-col> <ion-col> ion-col <br># <br># </ion-col> <ion-col> ion-col <br># <br># <br># </ion-col> </ion-row>
<ion-row> <ion-col class="ion-align-self-start"> ion-col [start] </ion-col> <ion-col class="ion-align-self-center"> ion-col [center] </ion-col> <ion-col class="ion-align-self-end"> ion-col [end] </ion-col> <ion-col> ion-col <br># <br># </ion-col> </ion-row>
<ion-row class="ion-align-items-start"> <ion-col> [start] ion-col </ion-col> <ion-col> [start] ion-col </ion-col> <ion-col class="ion-align-self-end"> [start] ion-col [end] </ion-col> <ion-col> ion-col <br># <br># </ion-col> </ion-row>
<ion-row class="ion-align-items-center"> <ion-col> [center] ion-col </ion-col> <ion-col> [center] ion-col </ion-col> <ion-col> [center] ion-col </ion-col> <ion-col> ion-col <br># <br># </ion-col> </ion-row>
<ion-row class="ion-align-items-end"> <ion-col> [end] ion-col </ion-col> <ion-col class="ion-align-self-start"> [end] ion-col [start] </ion-col> <ion-col> [end] ion-col </ion-col> <ion-col> ion-col <br># <br># </ion-col> </ion-row>
<ion-row> <ion-col size="12" size-sm> ion-col [size="12"] [size-sm] </ion-col> <ion-col size="12" size-sm> ion-col [size="12"] [size-sm] </ion-col> <ion-col size="12" size-sm> ion-col [size="12"] [size-sm] </ion-col> <ion-col size="12" size-sm> ion-col [size="12"] [size-sm] </ion-col> </ion-row>
<ion-row> <ion-col size="12" size-md> ion-col [size="12"] [size-md] </ion-col> <ion-col size="12" size-md> ion-col [size="12"] [size-md] </ion-col> <ion-col size="12" size-md> ion-col [size="12"] [size-md] </ion-col> <ion-col size="12" size-md> ion-col [size="12"] [size-md] </ion-col> </ion-row>
<ion-row> <ion-col size="6" size-lg offset="3"> ion-col [size="6"] [size-lg] [offset="3"] </ion-col> <ion-col size="3" size-lg> ion-col [size="3"] [size-lg] </ion-col> </ion-row></ion-grid>import React from 'react';import { IonGrid, IonRow, IonCol, IonContent } from '@ionic/react';
export const GridExample: React.FC = () => ( <IonContent> <IonGrid> <IonRow> <IonCol>ion-col</IonCol> <IonCol>ion-col</IonCol> <IonCol>ion-col</IonCol> <IonCol>ion-col</IonCol> </IonRow>
<IonRow> <IonCol size="6">ion-col size="6"</IonCol> <IonCol>ion-col</IonCol> <IonCol>ion-col</IonCol> </IonRow>
<IonRow> <IonCol size="3">ion-col size="3"</IonCol> <IonCol>ion-col</IonCol> <IonCol size="3">ion-col size="3"</IonCol> </IonRow>
<IonRow> <IonCol size="3">ion-col size="3"</IonCol> <IonCol size="3" offset="3"> ion-col size="3" offset="3" </IonCol> </IonRow>
<IonRow> <IonCol>ion-col</IonCol> <IonCol> ion-col <br /># </IonCol> <IonCol> ion-col <br /># <br /># </IonCol> <IonCol> ion-col <br /># <br /># <br /># </IonCol> </IonRow>
<IonRow> <IonCol className="ion-align-self-start">ion-col start</IonCol> <IonCol className="ion-align-self-center">ion-col center</IonCol> <IonCol className="ion-align-self-end">ion-col end</IonCol> <IonCol> ion-col <br /># <br /># </IonCol> </IonRow>
<IonRow className="ion-align-items-start"> <IonCol>start ion-col</IonCol> <IonCol>start ion-col</IonCol> <IonCol className="ion-align-self-end">start ion-col end</IonCol> <IonCol> ion-col <br /># <br /># </IonCol> </IonRow>
<IonRow className="ion-align-items-center"> <IonCol>center ion-col</IonCol> <IonCol>center ion-col</IonCol> <IonCol>center ion-col</IonCol> <IonCol> ion-col <br /># <br /># </IonCol> </IonRow>
<IonRow className="ion-align-items-end"> <IonCol>end ion-col</IonCol> <IonCol className="ion-align-self-start">end ion-col start</IonCol> <IonCol>end ion-col</IonCol> <IonCol> ion-col <br /># <br /># </IonCol> </IonRow>
<IonRow> <IonCol size="12" size-sm> ion-col size="12" size-sm </IonCol> <IonCol size="12" size-sm> ion-col size="12" size-sm </IonCol> <IonCol size="12" size-sm> ion-col size="12" size-sm </IonCol> <IonCol size="12" size-sm> ion-col size="12" size-sm </IonCol> </IonRow>
<IonRow> <IonCol size="12" size-md> ion-col size="12" size-md </IonCol> <IonCol size="12" size-md> ion-col size="12" size-md </IonCol> <IonCol size="12" size-md> ion-col size="12" size-md </IonCol> <IonCol size="12" size-md> ion-col size="12" size-md </IonCol> </IonRow>
<IonRow> <IonCol size="6" size-lg offset="3"> ion-col size="6" size-lg offset="3" </IonCol> <IonCol size="3" size-lg> ion-col size="3" size-lg </IonCol> </IonRow> </IonGrid> </IonContent>);import { Component, h } from '@stencil/core';
@Component({ tag: 'grid-example', styleUrl: 'grid-example.css'})export class GridExample { render() { return [ <ion-grid> <ion-row> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> </ion-row>
<ion-row> <ion-col size="6"> ion-col [size="6"] </ion-col> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> </ion-row>
<ion-row> <ion-col size="3"> ion-col [size="3"] </ion-col> <ion-col> ion-col </ion-col> <ion-col size="3"> ion-col [size="3"] </ion-col> </ion-row>
<ion-row> <ion-col size="3"> ion-col [size="3"] </ion-col> <ion-col size="3" offset="3"> ion-col [size="3"] [offset="3"] </ion-col> </ion-row>
<ion-row> <ion-col> ion-col </ion-col> <ion-col> ion-col <br/># </ion-col> <ion-col> ion-col <br/># <br/># </ion-col> <ion-col> ion-col <br/># <br/># <br/># </ion-col> </ion-row>
<ion-row> <ion-col class="ion-align-self-start"> ion-col [start] </ion-col> <ion-col class="ion-align-self-center"> ion-col [center] </ion-col> <ion-col class="ion-align-self-end"> ion-col [end] </ion-col> <ion-col> ion-col <br/># <br/># </ion-col> </ion-row>
<ion-row class="ion-align-items-start"> <ion-col> [start] ion-col </ion-col> <ion-col> [start] ion-col </ion-col> <ion-col class="ion-align-self-end"> [start] ion-col [end] </ion-col> <ion-col> ion-col <br/># <br/># </ion-col> </ion-row>
<ion-row class="ion-align-items-center"> <ion-col> [center] ion-col </ion-col> <ion-col> [center] ion-col </ion-col> <ion-col> [center] ion-col </ion-col> <ion-col> ion-col <br/># <br/># </ion-col> </ion-row>
<ion-row class="ion-align-items-end"> <ion-col> [end] ion-col </ion-col> <ion-col class="ion-align-self-start"> [end] ion-col [start] </ion-col> <ion-col> [end] ion-col </ion-col> <ion-col> ion-col <br/># <br/># </ion-col> </ion-row>
<ion-row> <ion-col size="12" sizeSm=""> ion-col [size="12"] [sizeSm] </ion-col> <ion-col size="12" sizeSm=""> ion-col [size="12"] [sizeSm] </ion-col> <ion-col size="12" sizeSm=""> ion-col [size="12"] [sizeSm] </ion-col> <ion-col size="12" sizeSm=""> ion-col [size="12"] [sizeSm] </ion-col> </ion-row>
<ion-row> <ion-col size="12" sizeMd=""> ion-col [size="12"] [sizeMd] </ion-col> <ion-col size="12" sizeMd=""> ion-col [size="12"] [sizeMd] </ion-col> <ion-col size="12" sizeMd=""> ion-col [size="12"] [sizeMd] </ion-col> <ion-col size="12" sizeMd=""> ion-col [size="12"] [sizeMd] </ion-col> </ion-row>
<ion-row> <ion-col size="6" sizeLg="" offset="3"> ion-col [size="6"] [sizeLg] [offset="3"] </ion-col> <ion-col size="3" sizeLg=""> ion-col [size="3"] [sizeLg] </ion-col> </ion-row> </ion-grid> ]; }}<template> <ion-grid> <ion-row> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> </ion-row>
<ion-row> <ion-col size="6"> ion-col [size="6"] </ion-col> <ion-col> ion-col </ion-col> <ion-col> ion-col </ion-col> </ion-row>
<ion-row> <ion-col size="3"> ion-col [size="3"] </ion-col> <ion-col> ion-col </ion-col> <ion-col size="3"> ion-col [size="3"] </ion-col> </ion-row>
<ion-row> <ion-col size="3"> ion-col [size="3"] </ion-col> <ion-col size="3" offset="3"> ion-col [size="3"] [offset="3"] </ion-col> </ion-row>
<ion-row> <ion-col> ion-col </ion-col> <ion-col> ion-col <br># </ion-col> <ion-col> ion-col <br># <br># </ion-col> <ion-col> ion-col <br># <br># <br># </ion-col> </ion-row>
<ion-row> <ion-col class="ion-align-self-start"> ion-col [start] </ion-col> <ion-col class="ion-align-self-center"> ion-col [center] </ion-col> <ion-col class="ion-align-self-end"> ion-col [end] </ion-col> <ion-col> ion-col <br># <br># </ion-col> </ion-row>
<ion-row class="ion-align-items-start"> <ion-col> [start] ion-col </ion-col> <ion-col> [start] ion-col </ion-col> <ion-col class="ion-align-self-end"> [start] ion-col [end] </ion-col> <ion-col> ion-col <br># <br># </ion-col> </ion-row>
<ion-row class="ion-align-items-center"> <ion-col> [center] ion-col </ion-col> <ion-col> [center] ion-col </ion-col> <ion-col> [center] ion-col </ion-col> <ion-col> ion-col <br># <br># </ion-col> </ion-row>
<ion-row class="ion-align-items-end"> <ion-col> [end] ion-col </ion-col> <ion-col class="ion-align-self-start"> [end] ion-col [start] </ion-col> <ion-col> [end] ion-col </ion-col> <ion-col> ion-col <br># <br># </ion-col> </ion-row>
<ion-row> <ion-col size="12" size-sm> ion-col [size="12"] [size-sm] </ion-col> <ion-col size="12" size-sm> ion-col [size="12"] [size-sm] </ion-col> <ion-col size="12" size-sm> ion-col [size="12"] [size-sm] </ion-col> <ion-col size="12" size-sm> ion-col [size="12"] [size-sm] </ion-col> </ion-row>
<ion-row> <ion-col size="12" size-md> ion-col [size="12"] [size-md] </ion-col> <ion-col size="12" size-md> ion-col [size="12"] [size-md] </ion-col> <ion-col size="12" size-md> ion-col [size="12"] [size-md] </ion-col> <ion-col size="12" size-md> ion-col [size="12"] [size-md] </ion-col> </ion-row>
<ion-row> <ion-col size="6" size-lg offset="3"> ion-col [size="6"] [size-lg] [offset="3"] </ion-col> <ion-col size="3" size-lg> ion-col [size="3"] [size-lg] </ion-col> </ion-row> </ion-grid></template>
<script>import { IonCol, IonGrid, IonRow } from '@ionic/vue';import { defineComponent } from 'vue';
export default defineComponent({ components: { IonCol, IonGrid, IonRow }});</script>Properties#
fixed#
| Description | If true, the grid will have a fixed width based on the screen size. |
| Attribute | fixed |
| Type | boolean |
| Default | 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 |