ion-grid
Ionic4项目中我们可以使用Ionic4栅格系统组件ion-grid对项目进行布局。 ion-grid官方文档地址:https://ionicframework.com/docs/api/gridThe grid is a powerful mobile-first flexbox system for building custom layouts.
It is composed of three units — a grid,
See
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