HTML-CSS 入門講座

HTML-CSS 入門講座

こんにちは！
今日も頑張ろう

Lesson-9
グリッドレイアウトを活用しましょう

目次

L9.1 はじめに

L9.1.1 概要

  • グリッドレイアウト（CSS Grid Layout Module）は、Web ページのレイアウトを作成するための新しい仕様です。
  • グリッドレイアウトは、二次元グリッドを使用してWeb ページのレイアウトを作成することができます。
  • フレックスレイアウトと比較するとフレックスレイアウトは一次元での配置が基本になっていますがグリッドレイアウトは二次元での配置が基本になっています。
  • HTML の table タグに類似していますが table タグではコンテンツの意味付け十分にできませんがグリッドレイアウトは、HTML の各タグの意味付けを最大限に使用できます。

L9.2 基本形

L9.2.1 構成要素

グリッドレイアウトを使用する時の構成例と各項目の名称および意味は、以下の通りです。

グリッドレイアウト構成要素

(1) コンテナ

グリッドレイアウト全体を囲む要素を示します。「display: grid;」（block 属性）または「display: inline-grid;」（inline-block 属性）を指定することで、その要素はグリッドレイアウトのコンテナになります。

(2) アイテム

コンテナの子要素を示します。コンテナの直接の子要素は基本的にすべてアイテムになります。

(3) ライン

グリッドレイアウトを分ける垂直および水平の線を示します。グリッドレイアウトの上下左右の両端にも存在します。ラインは上あるいは左から順に1から始まる正の値が割り当てられます。また、同時に下あるいは右から順に -1 から始まる値も割り当てられています。

(4) トラック

グリッドレイアウトの行および列を示します。トラックは隣接するラインの間を表します。

(5) セル

隣接する垂直および水平のラインが作る、アイテムを配置できる最小の単位を示します。

(6) エリア

一つあるいは複数のセルを結合してできるセルの集まりを示します。エリアには名前を付けることができアイテムを配置できます。

L9.2.2 ソースコード

HTML


<div class="container">
	<header>header</headerv>
	<aside>aside</asidev>
	<main>
		main
		<ul>
			<li>コンテンツ</li>
			<li>コンテンツ</li>
			<li>コンテンツ</li>
			<li>コンテンツ</li>
			<li>コンテンツ</li>
		</ul>
	</main>
	<footer>footer</footer>
</div>

CSS


div.container {
	display: grid;
	grid-template-rows: 80px auto 50px;
	grid-template-columns: 160px 1fr;
}
div.container header {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
	padding: 10px;
	background-color: #ccc;
}
div.container aside {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
	padding: 10px;
	background-color: #ddd;
}
div.container main {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
	padding: 10px;
	background-color: #eee;
}
div.container footer {
	grid-row: 3 / 4;
	grid-column: 1 / 3;
	padding: 10px;
	background-color: #ccc;
}

L9.2.3 表示形式

header
aside
main
  • コンテンツ
  • コンテンツ
  • コンテンツ
  • コンテンツ
  • コンテンツ
footer

L9.3 Grid コンテナ（親要素）に指定可能なプロパティ

L9.3.1 display（Grid コンテナ作成）

display: コンテナ属性;

Grid コンテナの作成を指定します。

コンテナ属性は、以下の値で指定します。

grid
block 属性の Grid コンテナを作成します。
inline-grid
inline-block 属性の Grid コンテナを作成します。

(1) display: grid;

(a) ソースコード
ソースコード表示

HTML


<!-- 子要素の div 間のすきまをつくらないために横に並べて記述 -->
<div class="grid-s-01"><div>子要素-1-1</div><div>子要素-1-2</div><div>子要素-1-3</div></div><div class="grid-s-01"><div>子要素-2-1</div><div>子要素-2-2</div><div>子要素-2-3</div></div>

CSS


.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1-1
子要素-1-2
子要素-1-3
子要素-2-1
子要素-2-2
子要素-2-3

(2) display: inline-grid;

(a) ソースコード
ソースコード表示

HTML


<!-- 子要素の div 間のすきまをつくらないために横に並べて記述 -->
<div class="grid-s-02"><div>子要素-1-1</div><div>子要素-1-2</div><div>子要素-1-3</div></div><div class="grid-s-02"><div>子要素-2-1</div><div>子要素-2-2</div><div>子要素-2-3</div></div>

CSS


.grid-s-02 {
	display: inline-grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-02 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1-1
子要素-1-2
子要素-1-3
子要素-2-1
子要素-2-2
子要素-2-3

L9.3.2 grid-template-rows（行方向のサイズ・ライン名）

grid-template-rows: 行方向のサイズ・ライン名;

グリッドレイアウトの行方向のトラックサイズ（高さ）をスペースで区切って指定します。指定は上から下の行の順で指定します。ラインに名前を付ける時は、対象のラインの場所に [ライン名] を指定します。

使用例

grid-template-rows: 100px auto 200px;

3行のトラックを作成することを示し、上から「① 100px、② 自動調整、③ 200px」のトラックになります。

使用例

grid-template-rows: [top] 100px [middle] auto [middle] 200px [end];

3行のトラックを作成することを示し、上から「① 100px、② 自動調整、③ 200px」のトラックになり、各ラインの名前は上から「① top、② middle、③ middle、④ end」になります。

(1) grid-template-rows: 100px auto 200px;

(a) ソースコード
ソースコード表示

HTML


<div class="grid-s-01" style="grid-template-rows: 100px auto 200px;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
</div>

CSS


.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3

L9.3.3 grid-template-columns（列方向のサイズ・ライン名）

grid-template-columns: 列方向のサイズ・ライン名;

グリッドレイアウトの列方向のトラックサイズ（横幅）をスペースで区切って指定します。指定は左から右の列の順で指定します。ラインに名前を付ける時は、対象のラインの場所に [ライン名] を指定します。1 つのラインに複数のライン名を付与する場合は、ライン名をスペースで区切って指定します。

使用例

grid-template-columns: 200px 1fr;

2列のトラックを作成することを示し、左から「① 200px、② 残り幅」のトラックになります。

使用例

grid-template-columns: [left] 200px [center] 1fr [right];

2列のトラックを作成することを示し、左から「① 200px、② 残り幅」のトラックになり、各ラインの名前は左から「① left、② center、③ right」になります。

(1) grid-template-columns: 100px 1fr 200px;

(a) ソースコード
ソースコード表示

HTML


<div class="grid-s-01" style="grid-template-columns: 100px 1fr 200px;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
</div>

CSS


.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3

L9.3.4 grid-template-areas（エリア名）

grid-template-areas: エリア名;

グリッドのセル単位にエリア名を指定します。エリア名は、セル単位にスペースで区切って指定し行単位にダブルクォーテーション（"）かシングルクォーテーション（'）で囲んで指定します。名前が必要無いセルの部分には 1 つ以上のピリオド（.）を指定します。

使用例

grid-template-areas: "header header" "aside main" "footer footer";

3行 x 2 列のグリッドレイアウトで1行目は「header」、2 行目の左は「aside」、2 行目の右は「main」、3 行目は「footer」という名前を付与します。

(1) grid-template-areas: "header header" "aside main" "footer footer";

(a) ソースコード
ソースコード表示

HTML


<div class="grid-s-01" style="grid-template: 80px auto 50px / 180px 1fr;">
	<div>header</div><div>header</div>
	<div>aside</div><div>main</div>
	<div>footer</div><div>footer</div>
</div>

CSS


.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
header
header
aside
main
footer
footer

L9.3.5 grid-template（サイズ・ライン名・エリア名一括指定）

grid-template: サイズ・ライン名・エリア名一括指定;

grid-template-rows、grid-template-columns、grid-template-areas をまとめて指定できるショートハンドプロパティです。トラックのみ、トラックとエリア、トラックとエリアとライン名など任意のパターンで指定できます。行の指定を行いスラッシュ（/）で区切って列の指定を行います。

使用例

grid-template: [top] "area1 area1" 100px [middle] "area2 area3" 300px [bottom] / [left] 1fr [center] 2fr [right];

(1) grid-template: 100px auto 200px / 100px 1fr 200px;

(a) ソースコード
ソースコード表示

HTML


<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

L9.3.6 row-gap（行間余白）

row-gap: 行間余白;

行間の余白を指定します。行間の余白はグリッド全体に適用されるため特定のトラックのみの設定はできません。最新の規定では、row-gap ですが grid-row-gap を指定してもかまいません。

(1) row-gap: 10px;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; row-gap: 10px;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

L9.3.7 column-gap（列間余白）

column-gap: 列間余白;

列間の余白を指定します。列間の余白はグリッド全体に適用されるため特定のトラックのみの設定はできません。最新の規定では column-gap ですが grid-column-gap を指定してもかまいません。

(1) column-gap: 5px;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; column-gap: 5px;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

L9.3.8 gap（行間・列間余白一括指定）

gap: 行間・列間余白一括指定;

row-gap（grid-row-gap）、column-gap（grid-column-gap）をまとめて指定できるショートハンドプロパティです。行の余白と列の余白をスペースで区切って指定します。余白を 1 つだけ指定した場合は行と列の両方の余白に適用されます。余白はグリッド全体に適用されるため特定のトラックのみの設定はできません。最新の規定では gap ですが grid-gap を指定してもかまいません。

(1) gap: 10px 5px;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; gap: 10px 5px;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

L9.3.9 grid-auto-flow（自動配置方向）

grid-auto-flow: 自動配置方向;

自動配置の方向とアルゴリズムを指定します。

自動配置方向は、以下の値で指定します。

row（初期値）
グリッドアイテムを各行に順に配置し、必要に応じて行を追加します。
column
グリッドアイテムを各列に順に配置し、必要に応じて列を追加します。
dense
空白セルを埋めてパッキングするようにグリッドアイテムを自動配置します。グリッドアイテムのサイズの大小をもとにパッキングの順番が決められます。

(1) grid-auto-flow: row;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; grid-auto-flow: row;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

(2) grid-auto-flow: column;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; grid-auto-flow: column;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

(3) grid-auto-flow: row;（dense指定なし）

(a) ソースコード
ソースコード表示

HTML


<p>「grid-template: 100px 100px 100px 100px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<p>子要素-1：grid-row: span 1; grid-column: span 1;</p>
<p>子要素-2：grid-row: span 2; grid-column: span 2;</p>
<p class="lf">子要素-3：grid-row: span 2; grid-column: span 2;</p>
<div class="grid-s-01" style="grid-template: 100px 100px 100px 100px / 100px 1fr 200px; grid-auto-flow: row;">
	<div style="grid-row: span 1; grid-column: span 1;">子要素-1</div>
	<div style="grid-row: span 2; grid-column: span 2;">子要素-2</div>
	<div style="grid-row: span 2; grid-column: span 2;">子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px 100px 100px 100px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1：grid-row: span 1; grid-column: span 1;

子要素-2：grid-row: span 2; grid-column: span 2;

子要素-3：grid-row: span 2; grid-column: span 2;

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

(4) grid-auto-flow: row dense;

(a) ソースコード
ソースコード表示

HTML


<p>「grid-template: 100px 100px 100px 100px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<p>子要素-1：grid-row: span 1; grid-column: span 1;</p>
<p>子要素-2：grid-row: span 2; grid-column: span 2;</p>
<p class="lf">子要素-3：grid-row: span 2; grid-column: span 2;</p>
<div class="grid-s-01" style="grid-template: 100px 100px 100px 100px / 100px 1fr 200px; grid-auto-flow: row dense;">
	<div style="grid-row: span 1; grid-column: span 1;">子要素-1</div>
	<div style="grid-row: span 2; grid-column: span 2;">子要素-2</div>
	<div style="grid-row: span 2; grid-column: span 2;">子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px 100px 100px 100px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1：grid-row: span 1; grid-column: span 1;

子要素-2：grid-row: span 2; grid-column: span 2;

子要素-3：grid-row: span 2; grid-column: span 2;

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

L9.3.10 grid-auto-rows（自動生成トラック行サイス）

grid-auto-rows: 自動生成トラック行サイズ;

配置時に自動で生成される行のトラックサイズを指定します。初期値は、auto でアイテムの内容に応じたサイズになります。指定値は複数のトラックサイズを指定することができ繰り返して使用されます。

(1) grid-auto-rows: 150px;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px; grid-auto-flow: row;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; grid-auto-flow: row; grid-auto-rows: 150px;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px; grid-auto-flow: row;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

L9.3.11 grid-auto-columns（自動生成トラック列サイズ）

grid-auto-columns: 自動生成トラック列サイズ;

配置時に自動で生成される列のトラックサイズを指定します。初期値は、auto でアイテムの内容に応じたサイズになります。指定値は複数のトラックサイズを指定することができ繰り返して使用されます。

(1) grid-auto-columns: 150px;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px; grid-auto-flow: column;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; grid-auto-flow: column; grid-auto-columns: 150px;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px; grid-auto-flow: column;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

L9.3.12 justify-items（Glid アイテム横位置）

justify-items: （Glid アイテム横位置）;

アイテムを配置する時の横位置を指定します。

Glid アイテム横位置は、以下の値で指定します。

stretch（初期値）
配置する時に引き伸ばしを行いアイテム全体を埋めるようにします。
start
配置する時に有効幅で左寄せで配置します。
center
配置する時に有効幅で中央寄せで配置します。
end
配置する時に有効幅で右寄せで配置します。

(1) justify-items: stretch;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; justify-items: stretch;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

(2) justify-items: start;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; justify-items: start;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

(3) justify-items: center;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; justify-items: center;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

(4) justify-items: end;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; justify-items: end;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

L9.3.13 align-items（Grid アイテム縦位置）

align-items: Gridアイテム縦位置;

アイテムを配置する時の縦位置を指定します。

Grid アイテム縦位置は、以下の値で指定します。

stretch（初期値）
配置する時に引き伸ばしを行いアイテム全体を埋めるようにします。
start
配置する時に有効幅で上寄せで配置します。
center
配置する時に有効幅で中央寄せで配置します。
end
配置する時に有効幅で下寄せで配置します。

(1) align-items: stretch;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; align-items: stretch;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

(2) align-items: start;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; align-items: start;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

(3) align-items: center;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; align-items: center;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

(4) align-items: end;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; align-items: end;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

L9.3.14 align-content（Grid アイテム縦配置位置）

align-content: Gridアイテム縦配置位置;

グリッドが親要素全体を埋める高さに満たない場合に親要素のどこに配置するかを指定します。

Gridアイテム縦配置位置は、以下の値で指定します。

start
配置する時に上寄せで配置します。
center
配置する時に中央寄せで配置します。
end
配置する時に下寄せで配置します。
space-between
配置する時に均等幅で配置されますが上部と下部に余白を作りません。
space-around
配置する時に均等幅で配置されますが上部と下部の余白は隣接アイテムの余白に対して半分になります。
space-evenly
配置する時に均等幅で配置されますが上部と下部の余白は隣接アイテムの余白と同じになります。

(1) align-content: （指定なし）;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

(2) align-content: start;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px; align-content: start;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

(3) align-content: center;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px; align-content: center;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

(4) align-content: end;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px; align-content: end;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

(5) align-content: space-between;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px; align-content: space-between;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

(6) align-content: space-around;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px; align-content: space-around;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

(7) align-content: space-evenly;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">「grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px;」のグリッドレイアウトに対して指定</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px; align-content: space-evenly;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px; height: 500px;」のグリッドレイアウトに対して指定

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

L9.4 Gridアイテム（子要素）に指定可能なプロパティ

L9.4.1 grid-row-start/end / grid-column-start/end（配置）


grid-row-start: 行方向配置開始位置;
grid-row-end: 行方向配置終了位置;
grid-column-start: 列方向配置開始位置;
grid-column-end: 列方向配置終了位置;

グリッドアイテムの開始位置、終了位置となるラインを指定します。

■ grid-row-start（行方向開始位置）

（正の値）
上から割り当てられたラインの番号を指定します。
（負の値）
下から割り当てられたラインの番号を指定します。
span （数値）
終了位置基準で割り当てるセルの個数を指定します。
（ライン名）
ラインに割り当てられた名前を指定します。

■ grid-row-end（行方向終了位置）

（正の値）
上から割り当てられたラインの番号を指定します。
（負の値）
下から割り当てられたラインの番号を指定します。
span （数値）
開始位置基準で割り当てるセルの個数を指定します。
（ライン名）
ラインに割り当てられた名前を指定します。

■ grid-column-start（列方向開始位置）

（正の値）
左から割り当てられたラインの番号を指定します。
（負の値）
右から割り当てられたラインの番号を指定します。
span （数値）
終了位置基準で割り当てるセルの個数を指定します。
（ライン名）
ラインに割り当てられた名前を指定します。

■ grid-column-end（列方向終了位置）

（正の値）
左から割り当てられたラインの番号を指定します。
（負の値）
右から割り当てられたラインの番号を指定します。
span （数値）
開始位置基準で割り当てるセルの個数を指定します。
（ライン名）
ラインに割り当てられた名前を指定します。

(1) （正の値）

(a) ソースコード
ソースコード表示

HTML


<p>「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定</p>
<p>子要素-1：grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: 2;</p>
<p>子要素-2：grid-row-start: 2; grid-row-end: 4; grid-column-start: 2; grid-column-end: 4;</p>
<p>子要素-3：grid-row-start: 1; grid-row-end: 2; grid-column-start: 3; grid-column-end: 4;</p>
<p class="lf">子要素-4：grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 3;</p>
<div class="grid-s-01" style="grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];">
	<div style="grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: 2;">子要素-1</div>
	<div style="grid-row-start: 2; grid-row-end: 4; grid-column-start: 2; grid-column-end: 4;">子要素-2</div>
	<div style="grid-row-start: 1; grid-row-end: 2; grid-column-start: 3; grid-column-end: 4;">子要素-3</div>
	<div style="grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 3;">子要素-4</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定

子要素-1：grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: 2;

子要素-2：grid-row-start: 2; grid-row-end: 4; grid-column-start: 2; grid-column-end: 4;

子要素-3：grid-row-start: 1; grid-row-end: 2; grid-column-start: 3; grid-column-end: 4;

子要素-4：grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 3;

子要素-1
子要素-2
子要素-3
子要素-4

(2) （負の値）

(a) ソースコード
ソースコード表示

HTML


<p>「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定</p>
<p>子要素-1：grid-row-start: -2; grid-row-end: -3; grid-column-start: -3; grid-column-end: -4;</p>
<p>子要素-2：grid-row-start: -1; grid-row-end: -3; grid-column-start: -1; grid-column-end: -3;</p>
<p>子要素-3：grid-row-start: -3; grid-row-end: -4; grid-column-start: -1; grid-column-end: -2;</p>
<p class="lf">子要素-4：grid-row-start: -3; grid-row-end: -4; grid-column-start: -2; grid-column-end: -4;</p>
<div class="grid-s-01" style="grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];">
	<div style="grid-row-start: -2; grid-row-end: -3; grid-column-start: -3; grid-column-end: -4;">子要素-1</div>
	<div style="grid-row-start: -1; grid-row-end: -3; grid-column-start: -1; grid-column-end: -3;">子要素-2</div>
	<div style="grid-row-start: -3; grid-row-end: -4; grid-column-start: -1; grid-column-end: -2;">子要素-3</div>
	<div style="grid-row-start: -3; grid-row-end: -4; grid-column-start: -2; grid-column-end: -4;">子要素-4</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定

子要素-1：grid-row-start: -2; grid-row-end: -3; grid-column-start: -3; grid-column-end: -4;

子要素-2：grid-row-start: -1; grid-row-end: -3; grid-column-start: -1; grid-column-end: -3;

子要素-3：grid-row-start: -3; grid-row-end: -4; grid-column-start: -1; grid-column-end: -2;

子要素-4：grid-row-start: -3; grid-row-end: -4; grid-column-start: -2; grid-column-end: -4;

子要素-1
子要素-2
子要素-3
子要素-4

(3) span （数値）

(a) ソースコード
ソースコード表示

HTML


<p>「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定</p>
<p>子要素-1：grid-row-start: 2; grid-row-end: span 1; grid-column-start: 1; grid-column-end: span 1;</p>
<p>子要素-2：grid-row-start: 2; grid-row-end: span 2; grid-column-start: 2; grid-column-end: span 2;</p>
<p>子要素-3：grid-row-start: 1; grid-row-end: span 1; grid-column-start: 3; grid-column-end: span 1;</p>
<p class="lf">子要素-4：grid-row-start: 1; grid-row-end: span 1; grid-column-start: 1; grid-column-end: span 2;</p>
<div class="grid-s-01" style="grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];">
	<div style="grid-row-start: 2; grid-row-end: span 1; grid-column-start: 1; grid-column-end: span 1;">子要素-1</div>
	<div style="grid-row-start: 2; grid-row-end: span 2; grid-column-start: 2; grid-column-end: span 2;">子要素-2</div>
	<div style="grid-row-start: 1; grid-row-end: span 1; grid-column-start: 3; grid-column-end: span 1;">子要素-3</div>
	<div style="grid-row-start: 1; grid-row-end: span 1; grid-column-start: 1; grid-column-end: span 2;">子要素-4</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定

子要素-1：grid-row-start: 2; grid-row-end: span 1; grid-column-start: 1; grid-column-end: span 1;

子要素-2：grid-row-start: 2; grid-row-end: span 2; grid-column-start: 2; grid-column-end: span 2;

子要素-3：grid-row-start: 1; grid-row-end: span 1; grid-column-start: 3; grid-column-end: span 1;

子要素-4：grid-row-start: 1; grid-row-end: span 1; grid-column-start: 1; grid-column-end: span 2;

子要素-1
子要素-2
子要素-3
子要素-4

(4) （ライン名）

(a) ソースコード
ソースコード表示

HTML


<p>「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定</p>
<p>子要素-1：grid-row-start: b; grid-row-end: c; grid-column-start: e; grid-column-end: f;</p>
<p>子要素-2：grid-row-start: b; grid-row-end: d; grid-column-start: f; grid-column-end: h;</p>
<p>子要素-3：grid-row-start: a; grid-row-end: b; grid-column-start: g; grid-column-end: h;</p>
<p class="lf">子要素-4：grid-row-start: a; grid-row-end: b; grid-column-start: e; grid-column-end: g;</p>
<div class="grid-s-01" style="grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];">
	<div style="grid-row-start: b; grid-row-end: c; grid-column-start: e; grid-column-end: f;">子要素-1</div>
	<div style="grid-row-start: b; grid-row-end: d; grid-column-start: f; grid-column-end: h;">子要素-2</div>
	<div style="grid-row-start: a; grid-row-end: b; grid-column-start: g; grid-column-end: h;">子要素-3</div>
	<div style="grid-row-start: a; grid-row-end: b; grid-column-start: e; grid-column-end: g;">子要素-4</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定

子要素-1：grid-row-start: b; grid-row-end: c; grid-column-start: e; grid-column-end: f;

子要素-2：grid-row-start: b; grid-row-end: d; grid-column-start: f; grid-column-end: h;

子要素-3：grid-row-start: a; grid-row-end: b; grid-column-start: g; grid-column-end: h;

子要素-4：grid-row-start: a; grid-row-end: b; grid-column-start: e; grid-column-end: g;

子要素-1
子要素-2
子要素-3
子要素-4

L9.4.2 grid-row / grid-column（配置位置一括指定）


grid-row: 行方向配置一括指定;
grid-column: 列方向配置一括指定;

grid-row は、grid-row-start、grid-row-end をまとめて指定できるショートハンドプロパティです。開始位置と終了位置をスラッシュ（/）で区切って指定します。

grid-column は、grid-column-start、grid-column-end をまとめて指定できるショートハンドプロパティです。開始位置と終了位置をスラッシュ（/）で区切って指定します。

(1) （正の値）

(a) ソースコード
ソースコード表示

HTML


<p>「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定</p>
<p>子要素-1：grid-row: 2 / 3; grid-column: 1 / 2;</p>
<p>子要素-2：grid-row: 2 / 4; grid-column: 2 / 4;</p>
<p>子要素-3：grid-row: 1 / 2; grid-column: 3 / 4;</p>
<p class="lf">子要素-4：grid-row: 1 / 2; grid-column: 1 / 3;</p>
<div class="grid-s-01" style="grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];">
	<div style="grid-row: 2 / 3; grid-column: 1 / 2;">子要素-1</div>
	<div style="grid-row: 2 / 4; grid-column: 2 / 4;">子要素-2</div>
	<div style="grid-row: 1 / 2; grid-column: 3 / 4;">子要素-3</div>
	<div style="grid-row: 1 / 2; grid-column: 1 / 3;">子要素-4</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定

子要素-1：grid-row: 2 / 3; grid-column: 1 / 2;

子要素-2：grid-row: 2 / 4; grid-column: 2 / 4;

子要素-3：grid-row: 1 / 2; grid-column: 3 / 4;

子要素-4：grid-row: 1 / 2; grid-column: 1 / 3;

子要素-1
子要素-2
子要素-3
子要素-4

(2) （負の値）

(a) ソースコード
ソースコード表示

HTML


<p>「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定</p>
<p>子要素-1：grid-row: -2 / -3; grid-column: -3 / -4;</p>
<p>子要素-2：grid-row: -1 / -3; grid-column: -1 / -3;</p>
<p>子要素-3：grid-row: -3 / -4; grid-column: -1 / -2;</p>
<p class="lf">子要素-4：grid-row: -3 / -4; grid-column: -2 / -4;</p>
<div class="grid-s-01" style="grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];">
	<div style="grid-row: -2 / -3; grid-column: -3 / -4;">子要素-1</div>
	<div style="grid-row: -1 / -3; grid-column: -1 / -3;">子要素-2</div>
	<div style="grid-row: -3 / -4; grid-column: -1 / -2;">子要素-3</div>
	<div style="grid-row: -3 / -4; grid-column: -2 / -4;">子要素-4</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定

子要素-1：grid-row: -2 / -3; grid-column: -3 / -4;

子要素-2：grid-row: -1 / -3; grid-column: -1 / -3;

子要素-3：grid-row: -3 / -4; grid-column: -1 / -2;

子要素-4：grid-row: -3 / -4; grid-column: -2 / -4;

子要素-1
子要素-2
子要素-3
子要素-4

(3) span （数値）

(a) ソースコード
ソースコード表示

HTML


<p>「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定</p>
<p>子要素-1：grid-row: 2 / span 1; grid-column: 1 / span 1;</p>
<p>子要素-2：grid-row: 2 / span 2; grid-column: 2 / span 2;</p>
<p>子要素-3：grid-row: 1 / span 1; grid-column: 3 / span 1;</p>
<p class="lf">子要素-4：grid-row: 1 / span 1; grid-column: 1 / span 2;</p>
<div class="grid-s-01" style="grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];">
	<div style="grid-row: 2 / span 1; grid-column: 1 / span 1;">子要素-1</div>
	<div style="grid-row: 2 / span 2; grid-column: 2 / span 2;">子要素-2</div>
	<div style="grid-row: 1 / span 1; grid-column: 3 / span 1;">子要素-3</div>
	<div style="grid-row: 1 / span 1; grid-column: 1 / span 2;">子要素-4</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定

子要素-1：grid-row: 2 / span 1; grid-column: 1 / span 1;

子要素-2：grid-row: 2 / span 2; grid-column: 2 / span 2;

子要素-3：grid-row: 1 / span 1; grid-column: 3 / span 1;

子要素-4：grid-row: 1 / span 1; grid-column: 1 / span 2;

子要素-1
子要素-2
子要素-3
子要素-4

(4) （ライン名）

(a) ソースコード
ソースコード表示

HTML


<p>「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定</p>
<p>子要素-1：grid-row-start: b; grid-row-end: c; grid-column-start: e; grid-column-end: f;</p>
<p>子要素-2：grid-row-start: b; grid-row-end: d; grid-column-start: f; grid-column-end: h;</p>
<p>子要素-3：grid-row-start: a; grid-row-end: b; grid-column-start: g; grid-column-end: h;</p>
<p class="lf">子要素-4：grid-row-start: a; grid-row-end: b; grid-column-start: e; grid-column-end: g;</p>
<div class="grid-s-01" style="grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];">
	<div style="grid-row-start: b; grid-row-end: c; grid-column-start: e; grid-column-end: f;">子要素-1</div>
	<div style="grid-row-start: b; grid-row-end: d; grid-column-start: f; grid-column-end: h;">子要素-2</div>
	<div style="grid-row-start: a; grid-row-end: b; grid-column-start: g; grid-column-end: h;">子要素-3</div>
	<div style="grid-row-start: a; grid-row-end: b; grid-column-start: e; grid-column-end: g;">子要素-4</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: [a] 100px [b] auto [c] 200px [d] / [e] 100px [f] 1fr [g] 200px [h];」のグリッドレイアウトに対して指定

子要素-1：grid-row-start: b; grid-row-end: c; grid-column-start: e; grid-column-end: f;

子要素-2：grid-row-start: b; grid-row-end: d; grid-column-start: f; grid-column-end: h;

子要素-3：grid-row-start: a; grid-row-end: b; grid-column-start: g; grid-column-end: h;

子要素-4：grid-row-start: a; grid-row-end: b; grid-column-start: e; grid-column-end: g;

子要素-1
子要素-2
子要素-3
子要素-4

L9.4.3 grid-area（配置位置エリア・ライン一括指定）

grid-area: 配置位置エリア・ライン一括指定;

グリッドアイテムの割り当てをエリアベースまたはラインベースで指定します。エリアベースで指定する場合は、grid-template-areas で作成したエリア名を指定します。ラインベースで指定する場合は、行の開始位置、列の開始位置、行の終了位置、列の終了位置をスラッシュ（/）で区切って指定します。

grid-template-areas を使用してエリア名前を付与

「grid-template: 80px auto 50px / 180px 1fr;」のグリッドレイアウトに対して指定

grid-template-areas: "header header" "aside main" "footer footer";

header
header
aside
main
footer
footer

(1) エリアベース

(a) ソースコード
ソースコード表示

HTML


<p>子要素-1：grid-area: header;</p>
<p>子要素-2：grid-area: aside;</p>
<p>子要素-3：grid-area: main;</p>
<p class="lf">子要素-4：grid-area: footer;</p>
<div class="grid-s-01" style="grid-template: 80px auto 50px / 180px 1fr; grid-template-areas: 'header header' 'aside main' 'footer footer';">
	<div style="grid-area: header;">子要素-1（header）</div>
	<div style="grid-area: aside;">子要素-2（aside）</div>
	<div style="grid-area: main;">子要素-3（main）</div>
	<div style="grid-area: footer;">子要素-4（footer）</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

子要素-1：grid-area: header;

子要素-2：grid-area: aside;

子要素-3：grid-area: main;

子要素-4：grid-area: footer;

子要素-1（header）
子要素-2（aside）
子要素-3（main）
子要素-4（footer）

(2) ラインベース

(a) ソースコード
ソースコード表示

HTML


<p>子要素-1：grid-area: 1 / 1 / 2 / 3;</p>
<p>子要素-2：grid-area: 2 / 1 / 3 / 2;</p>
<p>子要素-3：grid-area: 2 / 2 / 3 / 3;</p>
<p class="lf">子要素-4：grid-area: 3 / 1 / 4 / 3;</p>
<div class="grid-s-01" style="grid-template: 80px auto 50px / 180px 1fr; grid-template-areas: 'header header' 'aside main' 'footer footer';">
	<div style="grid-area: 1 / 1 / 2 / 3;">子要素-1（header）</div>
	<div style="grid-area: 2 / 1 / 3 / 2;">子要素-2（aside）</div>
	<div style="grid-area: 2 / 2 / 3 / 3;">子要素-3（main）</div>
	<div style="grid-area: 3 / 1 / 4 / 3;">子要素-4（footer）</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

子要素-1：grid-area: 1 / 1 / 2 / 3;

子要素-2：grid-area: 2 / 1 / 3 / 2;

子要素-3：grid-area: 2 / 2 / 3 / 3;

子要素-4：grid-area: 3 / 1 / 4 / 3;

子要素-1（header）
子要素-2（aside）
子要素-3（main）
子要素-4（footer）

L9.4.4 justify-self（Grid アイテム横位置）

justify-self: Gridアイテム横位置;

アイテムを配置する時の横位置を指定します。

Grid アイテム横位置は、以下の値で指定します。

stretch（初期値）
配置する時に引き伸ばしを行いアイテム全体を埋めるようにします。
start
配置する時に有効幅で左寄せで配置します。
center
配置する時に有効幅で中央寄せで配置します。
end
配置する時に有効幅で右寄せで配置します。

使用例

justify-self: center;

(1) justify-self: stretch / start / center / end;

(a) ソースコード
ソースコード表示

HTML


<p>「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<p>子要素-1：justify-self: stretch;</p>
<p>子要素-7：justify-self: start;</p>
<p>子要素-8：justify-self: center;</p>
<p class="lf">子要素-9：justify-self: end;</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px;">
	<div style="justify-self: stretch;">子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div style="justify-self: start;">子要素-7</div>
	<div style="justify-self: center;">子要素-8</div>
	<div style="justify-self: end;">子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1：justify-self: stretch;

子要素-7：justify-self: start;

子要素-8：justify-self: center;

子要素-9：justify-self: end;

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

L9.4.5 align-self（Grid アイテム縦位置）

align-self: Gridアイテム縦位置;

アイテムを配置する時の縦位置を指定します。

Gridアイテム縦位置は、以下の値で指定します。

stretch（初期値）
配置する時に引き伸ばしを行いアイテム全体を埋めるようにします。
start
配置する時に有効幅で上寄せで配置します。
center
配置する時に有効幅で中央寄せで配置します。
end
配置する時に有効幅で下寄せで配置します。

使用例

align-self: center;

(1) align-self: stretch / start / center / end;

(a) ソースコード
ソースコード表示

HTML


<p>「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<p>子要素-1：align-self: stretch;</p>
<p>子要素-7：align-self: start;</p>
<p>子要素-8：align-self: center;</p>
<p class="lf">子要素-9：align-self: end;</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px;">
	<div style="align-self: stretch;">子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div style="align-self: start;">子要素-7</div>
	<div style="align-self: center;">子要素-8</div>
	<div style="align-self: end;">子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1：align-self: stretch;

子要素-7：align-self: start;

子要素-8：align-self: center;

子要素-9：align-self: end;

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

L9.4.6 order（Grid アイテム配置順）

order: Gridアイテム配置順;

アイテムの配置順を指定します。

使用例

order: 1;

(1) align-self: stretch / start / center / end;

(a) ソースコード
ソースコード表示

HTML


<p>「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定</p>
<p>子要素-1：order: 5;</p>
<p>子要素-2：order: 2;</p>
<p>子要素-3：order: 3;</p>
<p>子要素-4：order: 6;</p>
<p>子要素-5：order: 9;</p>
<p>子要素-6：order: 8;</p>
<p>子要素-7：order: 7;</p>
<p>子要素-8：order: 4;</p>
<p class="lf">子要素-9：order: 1;</p>
<div class="grid-s-01" style="grid-template: 100px auto 200px / 100px 1fr 200px;">
	<div style="order: 5;">子要素-1</div>
	<div style="order: 2;">子要素-2</div>
	<div style="order: 3;">子要素-3</div>
	<div style="order: 6;">子要素-4</div>
	<div style="order: 9;">子要素-5</div>
	<div style="order: 8;">子要素-6</div>
	<div style="order: 7;">子要素-7</div>
	<div style="order: 4;">子要素-8</div>
	<div style="order: 1;">子要素-9</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.grid-s-01 {
	display: grid;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.grid-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

「grid-template: 100px auto 200px / 100px 1fr 200px;」のグリッドレイアウトに対して指定

子要素-1：order: 5;

子要素-2：order: 2;

子要素-3：order: 3;

子要素-4：order: 6;

子要素-5：order: 9;

子要素-6：order: 8;

子要素-7：order: 7;

子要素-8：order: 4;

子要素-9：order: 1;

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

L9.5 注意事項

L9.5.1 グリッドレイアウトで使用する fr 単位

グリッドレイアウトでは幅（長さ）を表す単位として fr が使用できます。fr は、fraction（分数・比）の意味を持ち比率でサイズが算出されます。ブラウザの幅に応じて可変のサイズを指定できるのでレスポンシブデザインの記述が簡単に行えます。
例えば、3 列の均等幅を作成する場合は、比率は「1:1:1」となるので「grid-template-columns: 1fr 1fr 1fr」と記述します。
また、px などの他の単位と併用する場合は、それらのサイズを差し引いてから fr を指定されている列のサイズを算出します。
例えば、1000px の幅のコンテナで「grid-template-columns: 400px 1fr 2fr」と指定すると「1000px - 400px = 600px」で、残っている 600px を「1:2」の比率で算出されるので、左から「① 400px、② 200px、③ 400px」の幅になります。

L9.5.2 自動で付与されるライン名

グリッドエリアを作成するとエリアを区切るラインに対して自動的にライン名が付与されます。自動的に付与されるエリア名は開始ラインが「エリア名-start」、終了ラインが「エリア名-end」になります。
例えば、「main」というエリア名を付与した場合は、開始位置のラインには「main-start」、終了位置のラインには「main-end」というライン名が付与されます。
自動で付与されたライン名は、グリッドアイテムを配置する時に使用できます。

L9.6 グリッドレイアウト作成例

L9.6.1 設計図の作成

グリッドレイアウトで作成する Web ページに格子を記入してセル構成を明確化します。

グリッドレイアウト設計図

L9.6.2 ソースコード

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>グリッドレイアウトサンプル（濱屋）</title>
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-rows: 100px auto 48px;
	grid-template-columns: 220px 220px 1fr;
	grid-template-areas: "header header nav"
						 "aside  main   main"
						 "footer footer footer";
	padding: 10px;
	border: #fff 1px solid;
}
header {
	grid-area: header;
	background-color: #14736a;
}
header h1 {
	padding: 10px 0 0 20px;
}
header h1 img {
	width: 20%;
}
header h1 span {
	color: #fff;
	font-size: 140%;
	padding-left: 10px;
	vertical-align: bottom;
}
nav {
	grid-area: nav;
	background-color: #14736a;
	padding: 50px 30px 0 0px;
}
nav ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 10px;
	list-style: none;
	margin: 0 0 5px 0;
}
nav ul li a {
	display: block;
	line-height: 2;
	font-size: 120%;
	color: #000;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	background-color: #bffff9;
	border-radius: 10px;
}
nav ul li a:hover {
	opacity: 0.6;
}
main {
	grid-area: main;
	background-color: #ebfffd;
	padding: 10px 20px 10px 20px;
}
main h2 {
	font-size: 140%;
	padding: 10px 0;
}
main article {
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: 3fr 7fr;
	padding-bottom: 10px;
}
main article h3 {
	grid-area: 1 / 1 / 2 / 3;
	font-size: 140%;
}
main article div.img {
	grid-area: 2 / 1 / 3 / 2;
}
main article div.img img {
	width: 100%;
	border: #ccc 1px solid;
	border-radius: 10px;
}
main article div.dsc {
	grid-area: 2 / 2 / 3 / 3;
}
main article div.dsc p {
	font-size: 120%;
	padding: 0 0 0 20px;
}
aside {
	grid-area: aside;
	background-color: #bffff9;
	padding: 20px;
}
aside h2 {
	font-size: 120%;
}
aside ul {
	padding-left: 20px;
	margin: 5px 0;
}
footer {
	grid-area: footer;
	text-align: center;
	background-color: #14736a;
}
footer small {
	line-height: 3;
	font-size: 100%;
	color: #fff;
}
</style>
</head>
<body>
	<div class="container">
		<header>
			<h1>
				<img src="images/grid-logo-01.png" alt="濱屋">
				<span>世界のこだわり商品を販売</span>
			</h1>
		</header>
		<nav>
			<ul>
				<li><a href="#">トップ</a></li>
				<li><a href="#">商品情報</a></li>
				<li><a href="#">企業情報</a></li>
				<li><a href="#">お問合せ</a></li>
			</ul>
		</nav>
		<main>
			<h2>お勧め商品情報</h2>
			<article>
				<h3>シーサーの飾り物</h3>
				<div class="img"><img src="images/grid-img-01.jpg" alt="沖縄のシーサー飾り"></div>
				<div class="dsc">
					<p>沖縄のシーサーの飾り物です。
					シーサーは沖縄県などで伝説の獣像で魔除けの意味を持ち屋根の上に設置されることが多いとされています。
					今回の商品はシーサーをベースにした飾り物で部屋の中に飾ることで魔除けとしても使えるかもしれません。</p>
				</div>
			</article>
			<article>
				<h3>インディアンの飾り物</h3>
				<div class="img"><img src="images/grid-img-02.jpg" alt="アメリカのイオンディアン飾り"></div>
				<div class="dsc">
					<p>アメリカの先住民であるインディアンが作成した飾り物です。
					この飾り物はアメリカのグランドキャニオンを拠点とするインディアンが作成しました。
					作成したインディアンの話ではインディアンが信仰する大地の神が宿っているとのことです。</p>
				</div>
			</article>
		</main>
		<aside>
			<h2>お知らせ</h2>
			<ul>
				<li>5月：GWお休み情報</li>
				<li>4月：新型コロナ情報</li>
				<li>4月：花見情報</li>
				<li>1月：初売り情報</li>
			</ul>
			<h2>ニュース</h2>
			<ul>
				<li>ドイツの新型食器</li>
				<li>ハワイ旅行とお土産</li>
				<li>鬼滅の刃の海外展開</li>
			</ul>
		</aside>
		<footer>
			<small>Copyright&copy; 2021 濱屋 All rights reserved.</small>
		</footer>
	</div>
</body>
</html>

L9.6.3 表示形式

ロケット本体
PAGE
TOP
ロケット炎