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 the Responsive Grid documentation for more information.

Usage

Angular

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

Javascript

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

React

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>
);

Stencil

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>,
    ];
  }
}

Vue

<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	trueの場合、グリッドの幅は画面サイズに応じた固定幅となる。
Attribute	fixed
Type	boolean
Default	false

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
--ion-grid-padding	グリッドのPadding
--ion-grid-padding-lg	LG画面でのグリッドのPadding
--ion-grid-padding-md	md画面におけるグリッドのPadding
--ion-grid-padding-sm	スマートスクリーンにおけるグリッドのPadding
--ion-grid-padding-xl	XL画面でのグリッドのPadding
--ion-grid-padding-xs	xs画面でのGridのPadding
--ion-grid-width	固定Gridの幅
--ion-grid-width-lg	LGスクリーンで固定されたGridの幅
--ion-grid-width-md	md画面での固定Gridの幅
--ion-grid-width-sm	sm画面での固定Gridの幅
--ion-grid-width-xl	xl画面での固定Gridの幅
--ion-grid-width-xs	xsスクリーンで固定されたGridの幅

Slots

No slots available for this component.