【CSS】Gridによるレイアウト配置

CSS

2021/04/11

Grid とは

Grid は、レイアウト配置のための仕組みで、display: gridとすることで子要素の並びを指定できるようになります。

HTML

<div class="grid">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

CSS

.grid {
  display : grid;
}

これだけの指定では、要素の並びに変化はありません。ここからどのように子要素の並びを変えるかを説明してきます。

Grid 定義

Grid は行列で分け、それぞれの数と幅（高さ）をgrid-template-columns（列）、grid-template-rows（行）で指定します。

CSS

.grid {
  display: grid;
  grid-template-columns: 50px 100px 200px;
  grid-template-rows: 50px 100px;
}

行と列で構成されたエリア（プレビューの青色のエリア）をセルと呼びます。

fr

幅の指定には、frという割合を表す単位を使用できます。1fr 1frは 1:1、1fr 2frは 1:2 となるように幅が割り当てられます。

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
  grid-template-rows: 1fr 2fr;
}

repeat

同じ幅が続く場合に、repeatを使って記述を省略することができます。第一引数に数、第二引数に幅を指定します。

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(2, 1fr);
}

repeatは一部分に使用することも可能です。

CSS

.grid {
  display: grid;
  grid-template-columns: 50px repeat(4, 1fr) 50px;
}

また幅の組み合わせを指定することができます。

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr 2fr);
}

auto

repeatは数を指定する必要があります。しかし、要素数が動的に変化して数の指定ができない場合も多々あります。

そのような場合は、grid-auto-columnsやgrid-auto-rowsを使用します。

まずは以下の例を見てください。

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 50px 100px;
}

これは奇数行が50px、偶数行が100pxになるように指定した例です。行数の指定はしていませんが、ここから要素が増えたとしても、このルールの通りレイアウトされます。

全て同じ高さ（幅）の場合は、grid-auto-rows: 50pxのように 1 つだけ指定します。

gap

セル間の間隔は、grid-gapによって指定します。

CSS

.grid {
  display: grid;
  grid-template-columns: (3, 1fr);
  grid-gap 10px;
}

行と列の間隔を別で指定したい場合は、grid-gap: 10px 20pxとするか、grid-row-gap: 10px、grid-column-gap: 20pxと指定します。

セル結合

以下のようなレイアウトを Grid を用いて実現することを考えていきます。

HTML

<div class="grid">
  <div class="header">Header</div>
  <div class="main">Main</div>
  <div class="side1">Side1</div>
  <div class="side1">Side2</div>
  <div class="side2">Side3</div>
  <div class="footer">Footer</div>
</div>

Header

Main

Side1

Side2

Side3

Footer

まずは以下のような Grid を定義します。プレビューは Grid（セル）のイメージです。

CSS

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

ここから以下のようにセルを結合することを考えます。

Header …　 1, 2, 3
Main …　 5, 8
Side1 …　 4, 7
Side2 …　 6
Side3 …　 9
Footer …　 10, 11, 12

セルの結合で重要なのは、グリッド線になります。以下がグリッド線のイメージです。

列（赤線）は、左端から順に連番が割り当てられます。行（青線）は、上端から順に連番が割り当てられます。

セルの結合は、このグリッド線の番号を指定して行います。例えば Header の場合、列は 1〜4、行は 1〜2 と指定します。

CSS では、行、列の範囲をgrid-columnとgrid-rowを使って以下のように指定します。

CSS

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

残りの要素も同じ要領で指定していくと、目的のレイアウトになります。

CSS

.header {
  grid-column: 1/4;
  grid-row: 1/2;
}
.main {
  grid-column: 2/3;
  grid-row: 2/4;
}
.side1 {
  grid-column: 1/2;
  grid-row: 2/4;
}
.side2 {
  grid-column: 3/4;
  grid-row: 2/3;
}
.header3 {
  grid-column: 3/4;
  grid-row: 3/4;
}
.footer {
  grid-column: 1/4;
  grid-row: 4/5;
}

エリア定義

Grid の定義には、grid-template-columnsとgrid-template-rowsを使用する方法とは別に、grid-template-areasを使用する方法があります。

例えば、セル結合で使用したレイアウトを定義してみます。

CSS

.grid {
  display: grid;
  grid-template-areas:
    "header header header"
    "side1  main   side2"
    "side1  main   side3"
    "footer footer footer"
}

行毎にエリア名を指定して Grid を定義します。隣接したエリア名が同じところは結合されます。

あとはgrid-areaを使い、配置したいエリアを子要素に指定します。

CSS

.header {
  grid-area: header;
}
.main {
  grid-area: main;
}
.side1 {
  grid-area: side1;
}
.side2 {
  grid-area: side2;
}
.side3 {
  grid-area: side3;
}
.footer {
  grid-area: footer;
}