Grid Layout

マークアップ

Grid Layout Module(以下Grid Layout)はCSSの新しい仕様です。ページ全体のレイアウトや格子状のレイアウトを記述するのに適しています(gridは「格子」の意)。基本的な使い方をご紹介しましょう。

コンテナとアイテム

Grid Layoutでは親要素を「コンテナ」子要素を「アイテム」と呼びます。この点はFlexboxと同じですね。

ある要素にdisplay:grid;(またはdisplay:inline-grid;)を指定すると、その要素はコンテナとなり、子要素はアイテムとなります。

Grid Layoutでは格子を分けるラインで要素の位置を指定します。ラインは上、あるいは左から順に1から始まる番号が振られています。

サンプル

サンプル画像
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Grid Layout</title>
  <link rel="stylesheet" href="sample.css">
</head>
<body>
  <div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
</body>
</html>
* {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-rows: 300px 1fr;
  grid-template-columns: 200px 1fr;
  height: 100vh;
}

.container div {
  text-align: center;
  font-size: 80px;
}

.item1 {
  background: red;
  grid-row: 1 / 3;
  grid-column: 1;
  line-height: 100vh;
}

.item2 {
  background: blue;
  grid-row: 1;
  grid-column: 2;
  line-height: 300px;
}

.item3 {
  background: green;
  grid-row: 2;
  grid-column: 2;
  line-height: calc(100vh - 300px);
}

サンプル画像のようなレイアウトは、上掲のHTML・CSSで指定しています。

.containerにはgrid-template-rows(行の高さを指定)とgrid-template-columns(列の幅を指定)が指定されています。サンプルの場合「1行目が300px、2行目が残りの高さ」「1列目が200px、2列目が残りの幅」となります。

item1はgrid-row(横のライン)を1番から3番まで、grid-column(縦のライン)を1番から2番までの位置を指定しています。指定には「起点となるライン番号 / 終点となるライン番号」とします。起点となるライン番号だけを記述すると、ライン1つ分が指定されます。

より詳しく知りたい方は、参考記事をどうぞ。

参考記事

CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様
CSSのGrid Layout Module(以下、Grid Layout)とは、ウェブサイトのレイアウトを構築するための新しい仕様です。今まではウェブサイトのレイアウトを実現するために、floatやFlexboxを使っていた方が多いのではないでしょうか。 Grid Layoutを使えば、HTML要素の構造を汚さず、従...
これからのレイアウトはGrid Layoutで決まり?特徴で使い分けたいCSSレイアウト手法
新しいCSSのGrid Layoutはウェブページのレイアウト構築に役立ちます。従来FloatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるでしょう。しかし、すべてをGrid Layoutで置き換えるのが良いとはいえません。 Float、Flexbox、Grid Layoutに...
CSS Grid Layout を極める!(基礎編) - Qiita
0. はじめに CSS Grid Layout(グリッドレイアウト)は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。 格子状のマス目のグリッドに好きな順番に配置したり結合したり...

コメント

  1. […] 参考までに前回の記事で用いたCSSファイルの一部を、変数を使って書き換えてみました。 […]

タイトルとURLをコピーしました