レスポンシブも簡単に!CSSグリッドレイアウトをマスターしよう

グリッド CSS3

WEBサイトのレイアウトを組むのに様々なプロパティがある昨今。

CSSグリッドレイアウトをマスターすれば、どんなレイアウトも怖くなくなるかも?

一般的なサイト構成を組んでみよう

CSSグリッドレイアウト

まずは上の画像のようなよくあるレイアウトをCSSグリッドレイアウトで組んでいきます。

グリッドレイアウト

グリッドの考え方はこんな感じです。

後ほどcloumrowを使って幅や高さを変えていきます。行と列の関係だということを覚えておきましょう。

下準備

<div class="container">
  <header>header</header>
  <main>main</main>
  <aside class="side1">side1</aside>
  <aside class="side1">side2</aside>
  <footer>footer</footer>
</div>

まずは並べたい要素をHTMLで用意しておきます。
わかりやすいように背景色を入れておくといいですよ。

.container {
  display:grid;
  gap:8px;
}

CSSはグリッドレイアウトを使用する親要素display:grid;

要素の間に余白がほしい場合gapで余白を指定します。

grid-templateで枠をつくる

.container {
  display:grid;
  gap:8px;
  grid-template-rows:50px 200px 50px; /*各枠の高さを指定*/
  grid-template-columns:1fr 3fr 1fr; /*各枠の幅を指定*/
}

はじめに親要素へgrid-templateを使って枠組みを作ります。

今回のグリッドは縦3段×横3段なので、まずgrid-template-rowsでグリッドの高さを3段分指定します。

例はheaderの高さが50px、真ん中の要素(mainとside)の高さが200px、footerの高さが50pxといった書き方です。

グリッドレイアウト

次にgrid-template-columnsで3列のグリッドの幅を指定します。

今回は1番要素の多い真ん中の赤枠部分を基準にしたいので、グリッド幅を1:3:1の割合に指定します。

幅や高さがしっくりこない場合は、後から数値を変えるだけで調整できるので便利ですね。

frは要素の割合を指定することができる単位

See the Pen CSSグリッドレイアウト1 by sukimadou (@sukimadou) on CodePen.

こんな感じで表示されていればOKです。
ここから要素を整えていきます。

作成した枠の中で要素を整える

先ほどの作った枠を基準にして要素をレイアウトしていきます。

グリッドレイアウト
/*columnの始点と終点を指定*/
header {
  grid-column:1 / 4;
}
footer {
  grid-column:1 / 4;
}

grid-columnでheaderとfooterの幅を指定しました。

上記のコードのように、columnの始点と終点を指示することで幅が決められます。

高さを指示するときはgrid-rowを使って同じように指定していきます。

また下記コードのようにgrid-areaを使用して、幅と高さを一度に指定することもできます。

/*column1-row1を始点 column3-row-2を終点とした範囲*/
header {
 grid-area: 1 / 1 / 3 / 2 ;
}

orderで表示順を入れかえる

HTNLにおいてコンテンツの重要度に応じて上から順に記述するのが理想です。

ですが、このままだとmain-side1-side2の順で表示されてしまうので、orderプロパティで表示する順番を入れ替えます。

/*各要素に表示順を指定*/
header {
  order:1;
}
main {
  order:3;
}
.side1 {
  order:2;
}
.side2 {
  order:4;
}
footer {
  order:5;
}

See the Pen CSSグリッドレイアウト2 by sukimadou (@sukimadou) on CodePen.

これにて完成〜

あとはコンテンツを入れながらお好みに微調整すればOK。

レスポンシブで1カラムにする場合

モバイルで見る際に1カラムで縦に並ばせたいという場合は、下記のように枠と表示順を対応させます。

@media (max-width:480px ){
/*枠を1frに*/
 .container {
  grid-template-columns: 1fr;
  }
/*表示順をリセット*/
  header,main,.side1,.side2,footer {
   order: 0;
  }
}

CSSグリッドレイアウト対応ブラウザ

ほとんどのブラウザで対応済みですがIE10では一部非対応、IE11以降はベンダープレフィックスが必要となります。

もうIEやだ!(心の声)
しかもIE用のベンダープレフィックスで一部異なるプロパティ名が使用されているので注意が必要です。

CSSグリッドレイアウトIE用ベンダープレフィックス
display:griddisplay:-ms-grid
grid-template-rows-ms-grid-rows
grid-template-columns-ms-grid-columns
grid-column-ms-grid-column
grid-row-ms-grid-row

IEではgrid-rowsが必須になるようなので、数値を指定しない場合もautoなどにして記入しておきましょう。