krzm.jp
黒住浩司 Webサイト

CSS グリッドレイアウト

内容

はじめに

いわゆるCSS3のグリッド レイアウト（CSS Grid Layout Module Level 1）に、Firefox 52が対応しました。Internet Explorer 11とMicrosoft Edgeはベンダー接頭辞付きの旧仕様で対応済みなので、これらのブラウザーでグリッドレイアウトが利用できます。また、仕様も2017年2月9日付で、W3C勧告候補まで昇格していました。

このスタイルシートは、IE10の頃には使えるようになっていたのですが、その他のブラウザーが今日まで対応せず、利用機会が限定されていました。インターネットで「グリッド レイアウト」を検索しても、デザイン技法としての「グリッド レイアウト」を無理やりWebページ上で実現させるような話題ばかりで、「CSS グリッド レイアウト」を解説したものは皆無に近いといえる状態でした。しかし、とりあえず3種類のブラウザーが対応するようになったことで、このスタイルの可能性も広がるかもしれません。

実例

以下の画像の組み合わせは、ul要素にグリッドレイアウト表示を指定し、li要素をその構成に従って配置したものです。表示されている写真は、li要素の背景画像です。

  • content1
  • content2
  • content3
  • content4
  • content5

コードの記述例

CSSとHTMLのソースコードは、以下の通りです。

CSS

html * {
	margin:0px;
	padding:0px;
	box-sizing:border-box;
}
.grid {
	display:-ms-grid;
	-ms-grid-columns:8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px;
	-ms-grid-rows:8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px;
	display:grid;
	grid-template-columns:8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px;
	grid-template-rows:8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px;
	width:100%;
	height:65vh;
	margin:1rem auto;
	list-style:none;
	color:rgb(240,240,240);
	background-color:rgb(64,64,64);
	background-image:repeating-linear-gradient(
		to bottom,
		rgba(240,240,240,0) 0px,
		rgba(240,240,240,0) 2px,
		rgba(240,240,240,0.1) 2px,
		rgba(240,240,240,0.1) 3px
	);
}
.grid li {
	padding:0.5rem 1rem;
	border:4px solid rgb(240,240,240);
	background-size:cover;
	background-position:center top;
	background-repeat:no-repeat;
}
.grid li:nth-child(1) {
	-ms-grid-column:2;
	-ms-grid-row:2;
	-ms-grid-column-span:5;
	-ms-grid-row-span:5;
	grid-column:2 / span 5;
	grid-row:2 / span 5;
	background-image:url("content1.png");
}
.grid li:nth-child(2) {
	-ms-grid-column:2;
	-ms-grid-row:5;
	-ms-grid-column-span:3;
	-ms-grid-row-span:4;
	grid-column:2 / span 3;
	grid-row:5 / span 4;
	background-image:url("content2.png");
	opacity:0.2;
}
.grid li:nth-child(3) {
	-ms-grid-column:5;
	-ms-grid-row:2;
	-ms-grid-column-span:4;
	-ms-grid-row-span:3;
	grid-column:5 / span 4;
	grid-row:2 / span 3;
	background-image:url("content3.png");
	opacity:0.4;
}
.grid li:nth-child(4) {
	-ms-grid-column:6;
	-ms-grid-row:8;
	grid-column:6;
	grid-row:8;
	background-image:url("content4.png");
}
.grid li:nth-child(5) {
	-ms-grid-column:8;
	-ms-grid-row:6;
	-ms-grid-row-span:3;
	grid-column:8;
	grid-row:6 / span 3;
	background-image:url("content5.png");
}

HTML

<ul class="grid">
	<li>content1</li>
	<li>content2</li>
	<li>content3</li>
	<li>content4</li>
	<li>content5</li>
</ul>
グリッドレイアウト関連プロパティ
プロパティ 値 備考
親要素側
display grid グリッドを構成する親要素に指定。IE, MS Edgeはベンダー接頭辞が必要（-ms-grid）
grid-template-columns 列幅の数値 各列の幅を数値で指定。半角スペースで区切った値の個数が列数となる
grid-template-rows 行高の数値 各行の高さを数値で指定。半角スペースで区切った値の個数が行数となる
-ms-grid-columns grid-template-columnsプロパティの旧仕様
-ms-grid-rows grid-template-rowsプロパティの旧仕様
子要素側
grid-column 列位置 / span 結合数 配置する列位置を、列の順位数で指定。オプションとして、/ spanを付けて”結合”する列数を数値指定。いずれも単位は無し
grid-row 行位置 / span 結合数 配置する行位置を、行の順位数で指定。オプションとして、/ spanを付けて”結合”する行数を数値指定。いずれも単位は無し
-ms-grid-column-span grid-columnプロパティ値spanオプションの旧仕様。独立したプロパティだった
-ms-grid-row-span grid-rowプロパティ値spanオプションの旧仕様。独立したプロパティだった

解説

CSS グリッド レイアウトは、対象要素内を格子状に区切り、そのマス目の中に（直接の）子要素を配置させます。

親要素側の設定

マス目を構成させる親要素には（上記の場合、ul要素）、まずdisplayプロパティでgrid（-ms-grid）値を指定します。そのうえで、列はgrid-template-columns（-ms-grid-columns）プロパティ、行はgrid-template-columns（-ms-grid-rows）プロパティで配分します。この例では、それぞれに値が9個入っているので、9列9行になります。値は列の幅と行の高さを表します。

grid-template-columns:8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px;
grid-template-rows:8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px;

8pxは文字どおりの固定数値ですが、これが5個あります。列で説明すると、左右の余白とマス目の隙間が空けてありますが、これらもすべて列として設定しているのです。他の4つの列は、frという単位で指定していますが、これは「比率」を表す相対値です。ul要素の幅（100%）から5列分の8px × 5 = 40pxを差し引いた残りを、4個の列に対しそれぞれ同じ比率（1fr）で幅を割り当てているのです。すなわち、1:1:1:1の配分です。仮に1fr、2fr、3fr、4frとした場合は、1:2:3:4の比率で配分されることになります。

グリッドの構成
グリッドの構成

子要素側の設定

このようにグリッドのマス目を定義したうえで、あとは直接の子要素（この場合li要素）に対し、どのマス目に配置するかを列（grid-column）と行（grid-row）の位置で指定します。例えば1つ目のli要素は、2列2行目に配置されています。

grid-column:2 / span 5;
grid-row:2 / span 5;

また、このli要素にはspan値も指定されていますが、これは、table要素のセル（th, td要素）におけるcolspanやrowspan属性と似た方法で、いくつの列もしくは行にわたってマス目を拡張するかを指定しています。すなわち、「grid-column:2 / span 5」とは、2列目に配置し、そこから5列分（2～6列目まで）を取るということです。まあ、Microsoft Excelのセル結合と同じともいえるでしょう。

子要素の配置1
1番目の子要素の配置

4番目と5番目のli要素は、以下の図のように、1番目のli要素を避けるように配置してあります。

子要素の配置2
4番目と5番目の子要素の配置

一方、2番目と3番目のli要素は、敢えて1番目と重ねて配置しています。グリッドレイアウトでは、こうした配置も可能なのです。この場合、要素の通常の重ね順どおり、HTMLコード上で後ろに記述されている兄弟姉妹要素が、前面に現れます。もちろん、それをz-indexプロパティで変更することもできます。ここでは、2番目と3番目のli要素にopacityプロパティを使って不透明度を適用しているので、背面のli要素も透けて見えるようになっています。

子要素の配置3
2番目と3番目の子要素の配置

なお、旧仕様でspanの指定は、grid-columnやgrid-rowプロパティの値としてではなく、grid-column-spanもしくはgrid-row-spanという独立したプロパティ使っていたため、IE、MS Edgeではこのプロパティにベンダー接頭辞を付ける記述になっています。