前回の記事では省略したもう一つの配置方法と、IE でのシミュレートがどのように機能しているのかをご紹介します。

もう一つの手動配置グリッド

今回ご紹介するグリッドレイアウトは、前回の記事でいうところの手動配置グリッドに似ていますが、自動配置グリッドで用いた grid-template-columns と grid-template-rows を使い、アスキーアートのように指定する grid-template は使いません。

この手法は可読性が悪く、予め図を書いておかないと組みづらいです。それでも紹介するのは、この手法だけがグリッドアイテムを重ねて表示できるからです。

グリッドラインについて

グリッドラインとは、その名の通りグリッドを構成する格子状の線のことです。3×3 のグリッドを作ると、グリッドラインは以下のように縦横に4本ずつ生成されます。

丸で囲った数字は、グリッドラインの番号です。それぞれ左上から振られます。

アイテムの配置

今回の配置では、このグリッドライン番号を指定して、アイテムを配置していきます。

<div class="grid-container">
	<div class="grid-item item-a">A</div>
	<div class="grid-item item-b">B</div>
	<div class="grid-item item-c">C</div>
</div>

スタイルでは、まず前回の自動配置グリッドで使った grid-template-columns / grid-template-rows で、行・列の数と幅を決めます。

.grid-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 5rem);
}

次に、各アイテムごとに grid-column で横方向の幅をグリッドライン番号（深緑に白抜き）で指定します。

縦方向の幅は grid-row を使って、同じくグリッドライン番号 （薄緑） で指定します。

.grid-container {
	.item-a {
		grid-column: 1 / 3; /* ❶～❸ */
		grid-row: 1 / 3; /* ①～③ */
	}
	.item-b {
		grid-column: 3 / 4; /* ❸～❹ */
		grid-row: 1 / 4; /* ①～④ */
	}
	.item-c {
		grid-column: 1 / 4; /* ❶～❹ */
		grid-row: 3 / 4; /* ③～④ */
	}
}

分かりやすさのため、グリッドライン番号を表示していますが、実際は不可視です。

このように、グリッドライン番号による配置では、意図的にアイテムを被せて表示させることができます。どうしても被せる必要がある場合のみ、この方法で配置しましょう。

ちなみに、被さる順番は HTML 要素の出現順と同じで、後の要素ほど上に表示されます。アイテムに z-index を指定すればこの順番を変更できます。（position は不要）