ブログデザイン備忘録～ gridを用いたレイアウト1

　今回はCSSのGridを用いたレイアウトについて紹介していきたい。基本的なコードは下記記事のものを用いて、最低限レイアウトを構成する必要なコードだけに絞った。

パンケーキスタック(Pancake stack)はヘッダー部、メイン部、フッター部の垂直に3層からなるレイアウトで、基本的なレイアウト方法の1つである。

htmlはtask-1 containerの中に共通のclass名:itemをもつheader,main,footerを定義しておく。共通のclass名によりCSSで.itemを指定することですべての要素にレイアウトを適用できる。

<body>
    <div class="task-1 container">
      
      <header class="item">header</header>

      <main class="item">main</main>

      <footer class="item">footer</footer>
      
    </div>
</body>

CSSに関しては、margin: 0 auto;とすることで、要素のマージンは上下なし、左右自動となりページ幅に関わらず中央に配置される。 max-width:1000px;は画面幅1000pxまではページ幅いっぱいに表示される。 .itemについては、レイアウトがわかりやすくなるように境界を設定している。

body {
  margin: 0 auto;
  max-width: 1000px;
}
.item {
  padding: 8px;
  border: 2px dashed green;
  border-radius: 2px;
}

次にGridを用いてパンケーキスタックレイアウトにするには以下のように記述する。

.task-1.container {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;
}

display:grid;とすることでGridが使用できる。height:100vh:はtask-1 containerの高さを指定するが、単位vhはページビューポートを基準としている。詳細は下記参照

CSS には vw, vh, vmin, vmax という単位がある | Developers.IO

3層のパンケーキスタックにするにはgrid-template-rows: auto 1fr auto;とすると1層(header)と3層(footer)はコンテンツに応じた高さ、2層(main)は1層と3層がページに収まっている状態でページ高さいっぱいまで広げる。（注：ページにheader,main,footerが必ず収まるようにレイアウトされるので、main内のコンテンツサイズに注意が必要） grid-template-rowsを変更して、例えばheaderとmainの比率を同じにしたければgrid-template-rows: 0.5fr 0.5fr auto;とすればよい。

以下に上記パンケーキスタックのレイアウトを実装したものを示す。表示サイズを変えても必ず3つの層が表示されることが確認できると思う。

See the Pen grid-pancake by ATATAT (@atatat) on CodePen.