「Grid」を使用した聖杯レイアウト

5446 ワード
HTML CSS grid HTML テキストリンク

「Grid」を使用した聖杯レイアウトについてまとめました。
※使うメリットはdivタグの使用頻度が減り、コードが見やすい。

完成形

HTML

親子関係を作ること。
親のclassに「グリッドコンテナー」(grid-container)を指定し、レイアウト対象である「グリッドアイテム」を囲む。

<div class="grid-container">
  <header>ヘッダー</header> 
  <nav>ジャンル</nav>
  <main>メモ</main>
  <aside>辞書</aside>
  <footer>フッター</footer>
</div>

CSS

グリッドラインで分割をする。

親クラス

  • display: grid;を記述。
  • 横を分割し、グリッドラインを作る。 　grid-template-columns: 1fr 3fr 1fr;
  • 縦を分割し、グリッドラインを作る。 　grid-template-rows:1fr 6fr 1fr;

※今回はfr（比率）で区切る。px、%でもOK！

グリッドアイテム
区切ったグリッドラインの範囲を数値で指定する。

  • 横は、grid-column: 始まりのライン / 終わりのライン;
  • 縦は、grid-row: 始まりのライン / 終わりのライン; 
.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows:1fr 6fr 1fr;
  height: 100vh;
}

header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  background-color: #E6FFE9;
}


article {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  background-color: white;
}


nav {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background-color: #EEEEEE;
}

aside {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  background-color: whitesmoke;
}

footer {
  grid-column: 1 / 4;
  grid-row: 3 / 4;
  background-color: #E6FFE9;
}

引用　https://goodsan.jp/wp/gridholy/

プログラミング初心者です。色々ご指摘頂けると幸いです。