ion-grid

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4栅格系统组件ion-grid对项目进行布局。

ion-grid官方文档地址:https://ionicframework.com/docs/api/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.

ion-grid 用法(Usage)

<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 align-self-start>
      ion-col [start]
    ion-col>
    <ion-col align-self-center>
      ion-col [center]
    ion-col>
    <ion-col align-self-end>
      ion-col [end]
    ion-col>
    <ion-col>
      ion-col
      <br>#
      <br>#
    ion-col>
  ion-row>

  <ion-row align-items-start>
    <ion-col>
      [start] ion-col
    ion-col>
    <ion-col>
      [start] ion-col
    ion-col>
    <ion-col align-self-end>
      [start] ion-col [end]
    ion-col>
    <ion-col>
      ion-col
      <br>#
      <br>#
    ion-col>
  ion-row>

  <ion-row 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 align-items-end>
    <ion-col>
      [end] ion-col
    ion-col>
    <ion-col 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 align-self-start>
      ion-col [start]
    ion-col>
    <ion-col align-self-center>
      ion-col [center]
    ion-col>
    <ion-col align-self-end>
      ion-col [end]
    ion-col>
    <ion-col>
      ion-col
      <br>#
      <br>#
    ion-col>
  ion-row>

  <ion-row align-items-start>
    <ion-col>
      [start] ion-col
    ion-col>
    <ion-col>
      [start] ion-col
    ion-col>
    <ion-col align-self-end>
      [start] ion-col [end]
    ion-col>
    <ion-col>
      ion-col
      <br>#
      <br>#
    ion-col>
  ion-row>

  <ion-row 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 align-items-end>
    <ion-col>
      [end] ion-col
    ion-col>
    <ion-col 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 } from '@ionic/react';

const Example: React.SFC<{}> = () => (
  <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 align-self-start>
        ion-col start
      IonCol>
      <IonCol align-self-center>
        ion-col center
      IonCol>
      <IonCol align-self-end>
        ion-col end
      IonCol>
      <IonCol>
        ion-col
        <br/>#
        <br/>#
      IonCol>
    IonRow>

    <IonRow align-items-start