taketiyo.log

Web Engineering 🛠 & Body Building 💪

【CSS3】Grid Layout の基礎【図解】

Programming

  / /

従来のWebページはfloatやclear、position等を駆使してレイアウトされていましたが、Grid Layoutの登場によりレイアウトはより簡単に、直感的に、柔軟に行うことが出来るようになってきています。
　
Can I use によると、Grid Layoutは現在主要ブラウザの88.35%が対応済みですので、現実的な選択肢としても視野に入ってきたのではないかと思います。
※2018/12/25現在
　
CSS3 のGrid Layout は大きく分けると「エリアベースレイアウト」「ラインベースレイアウト」の2通りの手法があります。
それぞれ順番に図解しているので、参考にしてみて下さい。
　

目次

　

エリアベースレイアウト

グリッドを作成し分割されたエリアに名前を付けます。そのエリア名を指定するような形でパーツをレイアウトしていく手法がエリアベースレイアウトです。
　
図のようなグリッドを<body>に作成してみます。

　
CSSを下記の通り記述する事で図のようなグリッドを作成することが出来ます。

body { 
  display: grid; 
  grid-template-areas: 
    'head head head' 
    'side main main' 
    'foot foot foot' 
  ; 
}

　
次にそれぞれのエリアに配置するコンテンツを作成します。

<body> 
  <div class="head">Head</div> 
  <div class="side">Side</div> 
  <div class="main">Main</div> 
  <div class="foot">Foot</div> 
</body>

　
コンテンツの配置をCSSで指定します。エリアベースレイアウトではコンテンツをどこに配置するかをエリア名で指定します。

.head { 
  grid-area: head; 
} 
.side { 
  grid-area: side; 
} 
.main { 
  grid-area: main; 
} 
.foot { 
  grid-area: foot; 
}

　
エリア毎の境界がわかりやすいようにボックス毎の高さを調整し色を付けると下記のような結果になります。

　

ポイント

  • grid-areaプロパティで配置を指定した際、同名のエリアは1エリアに結合して配置されます。
  • 今回のサンプルだと、head、main、footの連続したエリアが結合されている形となります。

　
行列のサイズが未指定の場合、エリアの高さや幅はコンテンツの内容に応じ、autoで処理されます。
高さに関しては問題ない場合が多いですが、幅に関しては整えたいケースがあるかと思います。
その場合、下記の様に横幅を指定します。

body { 
  display: grid; 
  grid-template-areas: 
    'head head head' 
    'side main main' 
    'foot foot foot' 
  ; 
  grid-template-columns: 1fr 5fr; // 追加 
}

　
bodyのスタイルにgrid-template-columnsプロパティを追記しました。
この記述でside:mainが1:5の比率で分割されるようになります。

　

ポイント

  • frはグリッドレイアウトのために用意された単位で、エリアの高さ、幅を比率で表現する際に使用します。
  • サイドエリアの幅を固定したい際は従来の単位px等を使用します。例）grid-template-columns: 200px 1fr;

　
以上がグリッドレイアウトにおけるエリアベースレイアウトの基礎となります。
　

ラインベースレイアウト

ページ内に縦/横のラインを引き、そのラインを基準にレイアウトを決定していく手法がラインベースレイアウトです。
　
図のようなラインを<body>に引いてみます。

　
CSSは下記の様になります。

body { 
  display: grid; 
  grid-template-columns: 
    [left] 1fr [main] 1140px [main-end] 1fr [right]; 
  grid-template-rows: 
    [top] auto [jumbotron] auto [main] auto [foot] auto [bottom]; 
}

　
配置するコンテンツを作成します。

<body> 
  <div class="head">Head</div> 
  <div class="main-image">Main Image</div> 
  <div class="main-content">Main Content</div> 
  <div class="foot">Foot</div> 
</body>

　
コンテンツの配置を行います。エリアベースレイアウトの時はエリア名を指定することでコンテンツの位置を定義しましたが、ラインベースレイアウトの場合は、コンテンツの開始ライン名を指定します。

.head { 
  grid-column-start: main; 
  grid-row-start: top; 
} 
.main-image { 
  grid-column-start: left; 
  grid-column-end: right; 
  grid-row-start: jumbotron; 
} 
.main-content { 
  grid-column-start: main; 
  grid-row-start: main; 
} 
.foot { 
  grid-column-start: main; 
  grid-row-start: foot; 
}

　
エリア毎の境界がわかりやすいようにボックス毎の高さを調整し色を付けると下記のような結果になります。

　

ポイント

  • ライン名は[]で文字列を囲うことで指定します。
  • 縦横ラインの開始位置はそれぞれgrid-column-start、grid-row-startで指定します。それぞれ終点のライン名を指定しない限り直後に見つかるラインが自動的に終点となります。
  • grid-template-rowsで指定している通り、コンテンツの縦幅は内容に応じて自動で調整されます。

　
コンテンツの間隔を調整する際は、各コンテンツのマージンやパディングを調整することで実現します。

.head {
  grid-column-start: main;
  grid-row-start: top;
  margin-bottom: 20px; /* 追加 */
}
.main-image {
  grid-column-start: left;
  grid-column-end: right;
  grid-row-start: jumbotron;
  margin-bottom: 20px; /* 追加 */
}
.main-content {
  grid-column-start: main;
  grid-row-start: main;
  margin-bottom: 10px; /* 追加 */
}

　

　
以上がグリッドレイアウトにおけるラインベースレイアウトの基礎となります。
　

おわりに

Grid Layout を用いると従来の複雑なレイアウトを驚くほどシンプルに記述することが出来ます。
レスポンシブへ対応する際もメディアクエリ（@media）を用いてエリアの配置を変更したり、ラインの本数を増減させたりといった対応のみで完了出来たりと、CSSに高い柔軟性と拡張性を持たせることが可能となります。