CSSによるページレイアウト3（grid）

レイアウト３：Gridを使ったレイアウト

フォルダ：layout_sample_03

CSSグリッドとは、格子状のマス目をつくり、マス目の上に自由に配置する方法です。CSSグリッドを使って、layout_sample_01と同じ配置を実装します

準備

layout_sample_01の完成時のHTML・CSSをそのまま使います
layout_sample_01を作成していない場合は、先に作成してください
HTMLにclassを追加します

▼index.htmlへの追記

<section class="sec01">
  <!--略-->
</section>
<section class="sec02">
  <!--略-->
</section>
<section class="sec03">
  <!--略-->
</section>

①CSSグリッドを有効にします

▼style.cssへの追記

main {
  padding: 1rem;
  margin: 0 auto;
  max-width: 1200px;
  flex-grow: 1;
  display: grid;
}

②ブラウザでindex.htmlを開き、開発モードを有効にします。CSSグリッドが表示されるように設定します。

▼Google Chromeの場合

③グリッドの分割をします。ここでは2列分、均等に分割します

▼style.cssへの追記

main {
  padding: 1rem;
  flex-grow: 1;
  margin: 0 auto;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

④分割されたマス目に、配置をします。

columnは横方向（列）、rowは縦方向（行）を意味します。例えば、headerであれば、横方向は1から5、縦方向は1 から2のエリアを指定します

▼style.cssへの追記

.sec01 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
}

.sec02 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 3;
}

.sec03 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 3;
}

【応用】画像をタイル状に配置する

タイル状のレイアウトをするときにもgridは活用できます

▼index.htmlへの追記・修正

<section class="sec03">
  <div class="container">
    <img src="images/square.png" alt="">
    <img src="images/square.png" alt="">
    <img src="images/square.png" alt="">
    <img src="images/square.png" alt="">
    <img src="images/square.png" alt="">
    <img src="images/square.png" alt="">
  </div>
</section>

▼style.cssの修正

.container{
  /* display: flex; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

/* 
.column-img {
  flex: 1;
}

.column-text {
  flex: 2;
}
 */

使わないプロパティ（flexに関する設定）はコメントアウトしています

作成例：https://ngsm-syr.github.io/layout_sample_03c/
コード：https://github.com/ngsm-syr/layout_sample_03c

【おまけ】gridの数を増やす

sec01とsec02のサイズを1:2にするにはどうすればよいか、考えてみてください

参考リンク