メインコンテンツまでスキップ
Version: v6

ion-grid

shadow

Contents

grid はカスタムレイアウトを作成するための強力なモバイルファーストのflexboxシステムです。

グリッド、row(s)column(s)の3つのユニットで構成されます。rowは行全体に展開され、他の列に合わせてサイズが変更されます。画面サイズに応じてブレークポイントが異なる、12列のレイアウトに基づいています。カラム数はCSSを使用してカスタマイズできます。

詳しくは Responsive Grid documentation をご覧ください。

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

Properties

fixed

DescriptionIf true, the grid will have a fixed width based on the screen size.
Attributefixed
Typeboolean
Defaultfalse

CSS Custom Properties

NameDescription
--ion-grid-paddingPadding for the Grid
--ion-grid-padding-lgPadding for the Grid on lg screens
--ion-grid-padding-mdPadding for the Grid on md screens
--ion-grid-padding-smPadding for the Grid on sm screens
--ion-grid-padding-xlPadding for the Grid on xl screens
--ion-grid-padding-xsPadding for the Grid on xs screens
--ion-grid-widthWidth of the fixed Grid
--ion-grid-width-lgWidth of the fixed Grid on lg screens
--ion-grid-width-mdWidth of the fixed Grid on md screens
--ion-grid-width-smWidth of the fixed Grid on sm screens
--ion-grid-width-xlWidth of the fixed Grid on xl screens
--ion-grid-width-xsWidth of the fixed Grid on xs screens
View Source