【HTML】grid-templateを使おう!【CSS】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。

１分で理解できるHTML/CSS講座シリーズです。

今回はgrid-templateについて学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

1分でgrid-templateが設定できる

１分で理解できるHTML/CSS講座シリーズはじめっ！

grid-templateとは
1. 実際に見てみよう！
まとめ

grid-templateとは

grid-templateとは一言で言うとCSSの複雑なレイアウト設計を
非常に簡易的かつグラフィカルに設定する方法です。

具体的に言うと以下の3つを一括に設定することが出来ます。

grid-template-columns
grid-template-rows
grid-template-areas

この3つは覚える必要はないよ！

実際に見てみよう！

See the Pen Untitled by samehack (@samehack) on CodePen.

このように設計が難しいとされる聖杯レイアウトも簡単に実装出来ます。

section {
  /* gridの設定 */
  display: grid;
  height: 100vh;
  grid-template:
    "...... ...... ...... ...... ...... ...... ...... " 1rem /* 縦幅 */
    "...... header header header header header ...... " 1fr /* 縦幅 */
    "...... ...... ...... ...... ...... ...... ...... " 1rem /* 縦幅 */
    "...... left   ...... main   ...... right  ...... " 5fr /* 縦幅 */
    "...... ...... ...... ...... ...... ...... ...... " 1rem /* 縦幅 */
    "...... footer footer footer footer footer ...... " 1fr /* 縦幅 */
    "...... ...... ...... ...... ...... ...... ...... " 1rem /* 縦幅 */
    / 1rem 1fr 1rem 2fr 1rem 1fr 1rem;
  /*横幅 横幅 横幅　横幅　横幅 横幅 横幅 */
}

理解すべきポイントはgrid-templateで
各セクションの縦幅と横幅、どこに何を表示するかを設定していることです。

実際の画面を見てもらうと、このレイアウト通りに要素が表示されていることがわかります。

gapを指定することで各要素の幅も設定できるけど
“……”に直接マージンを設定したほうが保守しやすいよ！

まとめ

grid-templateを使うと複雑なレイアウトが簡単に設計出来る
“……”に直接マージンの設定が可能

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram