本文へ移動

グリッド

基本

グリッド法則のサンプルコードです。

line-1

テキスト 1/1

<div>
<div><p>テキスト</p></div>
</div>

line-2

テキスト 1/2

テキスト 1/2

<div class="flex">
<div class="line-2"><p>テキスト</p></div>
<div class="line-2"><p>テキスト</p></div>
</div>

line-3

テキスト 1/3

テキスト 1/3

テキスト 1/3

<div class="flex">
<div class="line-3"><p>テキスト</p></div>
<div class="line-3"><p>テキスト</p></div>
<div class="line-3"><p>テキスト</p></div>
</div>

line-4

テキスト 1/4

テキスト 1/4

テキスト 1/4

テキスト 1/4

<div class="flex">
<div class="line-4"><p>テキスト</p></div>
<div class="line-4"><p>テキスト</p></div>
<div class="line-4"><p>テキスト</p></div>
<div class="line-4"><p>テキスト</p></div>
</div>

ミックス

グリッド法則を応用したサンプルコードです。

line-2 + line-4

テキスト 1/8

テキスト 1/8

テキスト 1/8

テキスト 1/8

テキスト 1/8

テキスト 1/8

テキスト 1/8

テキスト 1/8

<div class="flex">
<div class="line-2 flex">
<div class="line-4"><p>テキスト</p></div>
<div class="line-4"><p>テキスト</p></div>
<div class="line-4"><p>テキスト</p></div>
<div class="line-4"><p>テキスト</p></div>
</div>
<div class="line-2 flex">
<div class="line-4"><p>テキスト</p></div>
<div class="line-4"><p>テキスト</p></div>
<div class="line-4"><p>テキスト</p></div>
<div class="line-4"><p>テキスト</p></div>
</div>
</div>

line-3 + line-3-wide

テキスト 1/3

テキスト 2/3

<div class="flex">
<div class="line-3"><p>テキスト</p></div>
<div class="line-3-wide"><p>テキスト</p></div>
</div>

(line-3 + line-3-wide )*2

テキスト 1/3

テキスト 2/3

テキスト 1/3

テキスト 2/3

<div class="flex">
<div class="line-2 flex">
<div class="line-3"><p>テキスト</p></div>
<div class="line-3-wide"><p>テキスト</p></div>
</div>
<div class="line-2 flex">
<div class="line-3"><p>テキスト</p></div>
<div class="line-3-wide"><p>テキスト</p></div>
</div>
</div>

TIPS

基本

class 内容 適用先 制御内容
.flex Flexbox化 親 コンテナ化

主軸操作

class 内容 適用先 制御内容
.flex-row 主軸を横方向 親 主軸方向
.flex-row-reverse 主軸を横逆順 親 主軸方向
.flex-col 主軸を縦方向 親 主軸方向
.flex-wrap 折返しON 親 折返し
.flex-wrap-reverse 逆方向折返し 親 折返し
.flex-nowrap 折返しOFF 親 折返し

主軸配置

class 内容 適用先 制御内容
.justify-start 主軸先頭揃え 親 主軸配置
.justify-end 主軸末尾揃え 親 主軸配置
.justify-center 主軸中央揃え 親 主軸配置
.justify-between 主軸両端配置 親 主軸配置
.justify-around 主軸均等配置 親 主軸配置

交差軸配置

class 内容 適用先 制御内容
.items-start 交差軸先頭揃え 親 交差軸配置
.items-end 交差軸末尾揃え 親 交差軸配置
.items-center 交差軸中央揃え 親 交差軸配置
.items-baseline ベースライン揃え 親 交差軸配置
.items-stretch 交差軸方向に伸縮 親 交差軸配置

GAP

class 内容 適用先 制御内容
.gap-2 小余白 親 要素間余白
.gap-4 小〜中余白 親 要素間余白
.gap-8 中余白 親 要素間余白
.gap-16 大余白 親 要素間余白

子要素

class 内容 適用先 制御内容
.line-2 2カラム構成 子 子要素幅
.line-3 3カラム構成 子 子要素幅
.line-4 4カラム構成 子 子要素幅
.line-3-wide 1:2構成 子 子要素幅