Grid Layout の利用 - CSS
CSS の Grid Layout について紹介します。
概要
CSS のGrid Layout を利用すると、グリッドレイアウトを利用した複雑な段組みがシンプルな記述で作成できます。この記事ではCSSのGrid Layoutの導入についてシンプルな例をもとに紹介します。
書式
グリッドレイアウト全体を囲む枠に下記のCSSを設定します。
コンテナ枠
#(id名){
display: grid;
grid-template-columns: (1列目の幅) (2列目の幅) ...... (n列目の幅);
grid-template-rows: (1行目の高さ) (2行目の高さ) ...... (n行目の高さ);
}
または
.(クラス名){
display: grid;
grid-template-columns: (1列目の幅) (2列目の幅) ...... (n列目の幅);
grid-template-rows: (1行目の高さ) (2行目の高さ) ...... (n行目の高さ);
}
inline-grid を設定する方法もあります。inline-grid に関しては
こちらの記事を参照してください。
#(id名){
display: inline-grid;
grid-template-columns: (1列目の幅) (2列目の幅) ...... (n列目の幅);
grid-template-rows: (1行目の高さ) (2行目の高さ) ...... (n行目の高さ);
}
または
.(クラス名){
display: inline-grid;
grid-template-columns: (1列目の幅) (2列目の幅) ...... (n列目の幅);
grid-template-rows: (1行目の高さ) (2行目の高さ) ...... (n行目の高さ);
}
グリッドの枠 (アイテム枠)
グリッドの枠となる要素には下記のCSSを指定します。
#(id名){
grid-column: (列方向のグリッドの開始位置) / (列方向のグリッドの終了位置);
grid-row: (行方向のグリッドの開始位置) / (行方向のグリッドの終了位置);}
または
.(クラス名){
grid-column: (列方向のグリッドの開始位置) / (列方向のグリッドの終了位置);
grid-row: (行方向のグリッドの開始位置) / (行方向のグリッドの終了位置);}
}
もしくは、
#(id名){
grid-column-start: (列方向のグリッドの開始位置);
grid-column-end: (列方向のグリッドの終了位置);
grid-row-start: (行方向のグリッドの開始位置);
grid-row-end: (行方向のグリッドの終了位置);
}
または
.(クラス名){
grid-column-start: (列方向のグリッドの開始位置);
grid-column-end: (列方向のグリッドの終了位置);
grid-row-start: (行方向のグリッドの開始位置);
grid-row-end: (行方向のグリッドの終了位置);
}
記述例
グリッドの開始位置、終了位置はグリッドのラインで指定します。
下記コードの場合は、2番目のグリッドの縦ラインから4番目のグリッドの縦ラインまでをセルの横幅としています。
grid-column: 2 / 4;
コード例
下記のCSS HTMLファイルを作成します。
.Container {
display: grid;
grid-template-columns: 160px 160px 160px 160px;
grid-template-rows: 120px 120px;
border:solid #ff6a00 1px;
}
.GridItem1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
background-color: #ff9c9c;
}
.GridItem2 {
grid-column: 2 / 3;
grid-row: 1 / 2;
background-color: #ffcb70;
}
.GridItem3 {
grid-column: 3 / 4;
grid-row: 1 / 2;
background-color: #fffd70;
}
.GridItem4 {
grid-column: 4 / 5;
grid-row: 1 / 2;
background-color: #b0ff70;
}
.GridItem5 {
grid-column: 1 / 2;
grid-row: 2 / 3;
background-color: #7ee68d;
}
.GridItem6 {
grid-column: 2 / 3;
grid-row: 2 / 3;
background-color: #7ee6e2;
}
.GridItem7 {
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color:#95a7f5
}
.GridItem8 {
grid-column: 4 / 5;
grid-row: 2 / 3;
background-color: #d095f5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SimpleGrid.css" />
</head>
<body>
<div class="Container">
<div class="GridItem1">項目1</div>
<div class="GridItem2">項目2</div>
<div class="GridItem3">項目3</div>
<div class="GridItem4">項目4</div>
<div class="GridItem5">項目5</div>
<div class="GridItem6">項目6</div>
<div class="GridItem7">項目7</div>
<div class="GridItem8">項目8</div>
</div>
</body>
</html>
解説
下記のコンテナのCSS記述により、4列×2行のグリッドを作成しています。
.Container {
display: grid;
grid-template-columns: 160px 160px 160px 160px;
grid-template-rows: 120px 120px;
border:solid #ff6a00 1px;
}
グリッドの個々の要素のCSSは下記(GridItem1 ～ GridItem8)になります。各グリッド1つ分のグリッドセルを定義しています。背景色をグリッドのセルごとに変えています。
.GridItem1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
background-color: #ff9c9c;
}
表示結果
上記のHTMLファイルをMicrosoft Edge(Webブラウザ)で表示します。下図の画面が表示されます。2行×4列のグリッドが作成され、各セルに「項目n」の文字列が表示されています。また、セルの背景色もセルごとに設定できています。
同様に同じファイルを Google Chrome で表示します。下図の画面が表示されます。Google Chromeでも問題なく表示できます。
Microsoft Internet Explorer で上記のページを表示した結果です。Internet Explorer ではグリッド表示できず表示が崩れてしまっています。
すべてのグリッドにセルが無い場合の例
先の例ではすべてのグリッドにセルのアイテムがある場合を紹介しましたが、グリッドのすべてにアイテムが無くても動作します。グリッドのセルがスパース(飛び飛び)の例を紹介します。
コード
下記のCSS, HTML ファイルを作成します。
.Container {
display: grid;
grid-template-columns: 160px 160px 160px 160px;
grid-template-rows: 120px 120px;
border: solid #ff6a00 1px;
background-color:#E0E0E0;
}
.GridItem1 {
grid-column: 2 / 3;
grid-row: 1 / 2;
background-color: #ff9c9c;
}
.GridItem2 {
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color: #ffcb70;
}
.GridItem3 {
grid-column: 4 / 5;
grid-row: 1 / 2;
background-color: #fffd70;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SimpleGridSparse.css" />
</head>
<body>
<div class="Container">
<div class="GridItem1">項目1</div>
<div class="GridItem2">項目2</div>
<div class="GridItem3">項目3</div>
</div>
</body>
</html>
解説
グリッドの外側の枠は下記のコードにより、2行×4列のグリッドとしています。
display: grid;
grid-template-columns: 160px 160px 160px 160px;
grid-template-rows: 120px 120px;
グリッドのセル部分のCSSは下記になります。今回2×4の8セルのグリッドですが、内部は3セルしか配置しません。1行目の2列目のセル、2行目の3列目のセル、1行目の4列目のセルの3か所にコンテンツの枠を配置します。
.GridItem1 {
grid-column: 2 / 3;
grid-row: 1 / 2;
background-color: #ff9c9c;
}
.GridItem2 {
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color: #ffcb70;
}
.GridItem3 {
grid-column: 4 / 5;
grid-row: 1 / 2;
background-color: #fffd70;
}
グリッドのHTML部分です。グリッドの枠内に3つのdiv枠を記述します。
<div class="Container">
<div class="GridItem1">項目1</div>
<div class="GridItem2">項目2</div>
<div class="GridItem3">項目3</div>
</div>
表示結果
上記のHTMLをMicrosoft Edgeで表示します。下図の画面が表示されます。CSSで指定した位置にコンテンツの枠が配置されています。
Google Chromeで表示した画面は下図になります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
