HTML-CSS入門講座

濱屋太郎

Lesson-9

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

目次

9.1 はじめに

9.1.1 概要

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

9.2 基本形

9.2.1 構成要素

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

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

(1) コンテナ

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

(2) アイテム

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

(3) ライン

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

(4) トラック

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

(5) セル

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

(6) エリア

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

9.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: 180px 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;
}

9.2.3 表示形式

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

9.3 プロパティ一覧

9.3.1 Gridコンテナ(親要素)に指定可能なプロパティ

(1) display(Gridコンテナ作成)

display: (コンテナ属性);

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

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

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

使用例


display: grid;
display: inline-grid;

(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」になります。

(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」になります。

(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」という名前を付与します。

(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];

(6) row-gap(行間余白)

row-gap: (行間余白);

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

使用例

row-gap: 10px;

(7) column-gap(列間余白)

column-gap: (列間余白);

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

使用例

column-gap: 5px;

(8) gap(行間・列間余白一括指定)

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

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

使用例

gap: 10px 5px;

(9) grid-auto-flow(自動配置方向)

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

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

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

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

使用例


grid-auto-flow: column;
grid-auto-flow: row dense;

(10) grid-auto-rows(自動生成トラック行サイス)

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

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

使用例

grid-auto-rows: 200px;

(11) grid-auto-columns(自動生成トラック列サイズ)

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

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

使用例

grid-auto-columns: 200px;

(12) justify-items(Glidアイテム横位置)

justify-items: (Glidアイテム横位置);

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

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

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

使用例

justify-items: center;

(13) align-items(Gridアイテム縦位置)

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

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

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

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

使用例

align-items: center;

(14) align-content(Gridアイテム縦配置位置)

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

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

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

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

使用例

align-content: center;

9.3.2 Gridアイテム(子要素)に指定可能なプロパティ

(1) grid-row-start(行方向配置開始位置)

grid-row-start: (行方向配置開始位置);

グリッドアイテムの行方向の開始位置となるラインを指定します。ラインは以下の指定が可能です。

行方向配置開始位置は、以下の値で指定します。

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

使用例


grid-row-start: 1;
grid-row-start: -3;
grid-row-start: span 1
grid-row-start: top;

(2) grid-row-end(行方向配置終了位置)

grid-row-end: (行方向配置終了位置);

グリッドアイテムの行方向の終了位置となるラインを指定します。ラインは以下の指定が可能です。

行方向配置終了位置は、以下の値で指定します。

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

使用例


grid-row-end: 1;
grid-row-end: -3;
grid-row-end: span 1
grid-row-end: middle;

(3) grid-row(行方向配置一括指定)

grid-row: (行方向配置一括指定);

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

使用例

grid-row: 2 / 4;

(4) grid-column-start(列方向配置開始位置)

grid-column-start: (列方向配置開始位置);

グリッドアイテムの列方向の開始位置となるラインを指定します。ラインは以下の指定が可能です。

列方向配置開始位置は、以下の値で指定します。

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

使用例


grid-column-start: 1;
grid-column-start: -3;
grid-column-start: span 1
grid-column-start: left;

(5) grid-column-end(列方向配置終了位置)

grid-column-end: (列方向配置終了位置);

グリッドアイテムの列方向の終了位置となるラインを指定します。ラインは以下の指定が可能です。

列方向配置終了位置は、以下の値で指定します。

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

使用例


grid-column-end: 1;
grid-column-end: -3;
grid-column-end: span 1
grid-column-end: center;

(6) grid-column(列方向配置一括指定)

grid-column: (列方向配置一括指定);

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

使用例

grid-column: 3 / 4;

(7) grid-area(配置位置エリア・ライン一括指定)

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

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

使用例


grid-area: area1;
grid-area: 1 / 2 / 3 / 3;

(8) justify-self(Gridアイテム横位置)

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

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

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

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

使用例

justify-self: center;

(9) align-self(Gridアイテム縦位置)

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

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

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

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

使用例

align-self: center;

(10) order(Gridアイテム配置順)

order: (Gridアイテム配置順);

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

使用例

order: 1;

9.3.3 関連事項

(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」の幅になります。

(2) 自動で付与されるライン名

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

9.4 Gridコンテナ(親要素)のプロパティ

9.4.1 display(Gridコンテナ作成)

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

(1) display: grid;

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

(2) display: inline-grid;

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

9.4.2 grid-template-rows(行方向のサイズ・ライン名)

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

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

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

9.4.3 grid-template-columns(列方向のサイズ・ライン名)

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

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

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

9.4.4 grid-template-areas(エリア名)

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

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

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

header
header
aside
main
footer
footer

9.4.5 grid-template(サイズ・ライン名・エリア名一括指定)

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

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

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

9.4.6 row-gap(行間余白)

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

(1) row-gap: 10px;

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

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

9.4.7 column-gap(列間余白)

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

(1) column-gap: 5px;

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

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

9.4.8 gap(行間・列間余白一括指定)

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

(1) gap: 10px 5px;

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

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

9.4.9 grid-auto-flow(自動配置方向)

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

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

(1) grid-auto-flow: row;

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

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

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

「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

9.4.10 grid-auto-rows(自動生成トラック行サイス)

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

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

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

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

9.4.11 grid-auto-columns(自動生成トラック列サイズ)

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

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

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

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

9.4.12 justify-items(Glidアイテム横位置)

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

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

(1) justify-items: stretch;

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

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

(2) justify-items: start;

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

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

(3) justify-items: center;

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

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

(4) justify-items: end;

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

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

9.4.13 align-items(Gridアイテム縦位置)

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

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

(1) align-items: stretch;

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

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

(2) align-items: start;

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

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

(3) align-items: center;

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

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

(4) align-items: end;

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

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

9.4.14 align-content(Gridアイテム縦配置位置)

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

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

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

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

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

(2) align-content: start;

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

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

(3) align-content: center;

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

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

(4) align-content: end;

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

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

(5) align-content: space-between;

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

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

(6) align-content: space-around;

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

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

(7) align-content: space-evenly;

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

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

9.5 Gridアイテム(子要素)のプロパティ

9.5.1 grid-row-start/end / grid-column-start/end(配置)

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

■ grid-row-start(行方向開始位置)

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

■ grid-row-end(行方向終了位置)

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

■ grid-column-start(列方向開始位置)

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

■ grid-column-end(列方向終了位置)

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

(1) (正の値)

「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) (負の値)

「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 (数値)

「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) (ライン名)

「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

9.5.2 grid-row / grid-column(配置位置一括指定)

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

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

(1) (正の値)

「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) (負の値)

「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 (数値)

「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) (ライン名)

「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

9.5.3 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) エリアベース

子要素-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) ラインベース

子要素-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)

9.5.4 justify-self(Gridアイテム横位置)

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

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

「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

9.5.5 align-self(Gridアイテム縦位置)

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

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

「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

9.5.6 order(Gridアイテム配置順)

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

「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

9.6 グリッドレイアウト作成例

9.6.1 設計図の作成

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

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

9.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 {
	padding: 10px;
}
div.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";
}
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© 2021 濱屋 All rights reserved.</small>
		</footer>
	</div>
</body>
</html>

9.6.3 表示形式