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

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

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

一般的なサイト構成を組んでみよう
CSSグリッドレイアウト対応ブラウザ

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

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

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

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

下準備

<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を使って枠組みを作ります。

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

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

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

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

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

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

See the Pen CSSグリッドレイアウト１ 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グリッドレイアウト２ by sukimadou (@sukimadou) on CodePen.

これにて完成〜

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

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

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

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