きまぐれ引きこもりんご80%

CSS Grid【第1回】聖杯レイアウト

web制作

CSS Grid

前回のflex boxに引き続き、
今回はCSSグリッドレイアウト。

ベンダープレフィックスなしでは、IE11に対応しませんが、
IE11のサポートが切れる2025年を待たずとも、
これからどんどん普及していくと思うので、
とりあえず、最低限のことだけは知っておいた方がいいですよね。

CSS Gridでつくる聖杯レイアウト

ここでは、ヘッダー、フッター、コンテンツ、サイドバーといった
聖杯レイアウトを例に見ていきます。

基本的なhtmlは、
Flex box同様、「グリッドコンテナー」
レイアウト対象である「グリッドアイテム」を囲みます。

<div class="grid-container">
  <header>ヘッダー</header>
  <nav>グローバルナビ</nav>
  <article>メインコンテンツ</article>
  <aside>サイドバー</aside>
  <footer>フッター</footer>
</div>

次にCSSを指定していきます。
まず、グリッドコンテナーのdisplaygridに。
レイアウトは下図のように①〜④(任意)のグリッドラインで分割します。

グリッドレイアウト

横はgrid-template-columns、縦はgrid-template-rows
それぞれサイズをスペース区切りで順に割り振っていきます。
サイズの単位はpx、%、frを使用できます。(※frは比率)

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 180px;
  grid-template-rows: 150px 1fr 100px;
}

これで枠組みは出来たので、あとは各グリッドアイテムの範囲を指定していきます。
指定方法は、横をgrid-column、縦をgrid-rowプロパティを用いて 範囲をグリッドライン①〜④で指定します。
grid-column: 始まりのライン / 終わりのライン;
例えばヘッダーの場合は、 横方向に①〜④、縦方向に①〜②の範囲を占めていますので以下のような指定になります。

header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
}

残りのグリッドアイテムも指定して完成です。

article {
  grid-column: 2 / 3;
  grid-row-start: 2 / 3;
}
nav {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
aside {
  grid-column: 3 / 4;
  grid-row-start: 2 / 3;
}
footer {
  grid-column: 1 / 4;
  grid-row: 3 / 4;
}

聖杯レイアウトのレスポンシブ

メディアクエリで縦一列の並びにし、レスポンシブに対応します。
グリッドコンテナーのgrid-template-columns1frに、grid-template-rowsautoでリセット、
各グリッドアイテムもgrid-column1に、grid-rowautoでリセットします。

さらにorderプロパティーを用いてarticlenavの順序も変えてみましょう。使い方はflex box同様、並べたい順に番号を割り振るだけです。

@media all and (max-width: 480px){
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  header, article, nav, aside, footer {
    grid-column: 1;
    grid-row: auto;
  }
  header {
    order: 1;
  }
  article {
    order: 2;
  }
  nav {
    order: 3;
  }
  aside {
    order: 4;
  }
  footer {
    order: 5;
  }
}

See the Pen grid-holy by ossan (@g3) on CodePen.