HTML&CSS

CSS Gridレイアウト基本編

作成日：2021年05月26日

更新日：2021年05月26日

今回は、Grid レイアウトを紹介します。

Grid レイアウトを使いこなすことができれば、コーディングが簡単を簡単にすることができます。

Grid レイアウトとは

Grid レイアウトとは、グリッド上にある行と列の中にコンテンツを配置するレイアウトのことを言います。

下の図のように、色分けされている部分がコンテンツにあたると考えてください。

マス目の中に、自由にコンテンツを設置することができるようになるのです。

今までの CSS では、コンテンツは縦に並べるか、横に並べるかしかありませんでした。

図のように複雑な形状をするレイアウトを作成するためには、CSS を書いて設計するしかありませんでした。

CSS の Grid を使用して、わずかな CSS を入力するだけで、複雑なレイアウトを作ることができます。

Grid の全体を Grid コンテナ、その中のコンテンツを Grid アイテムと言います。

また、x 軸方向を ROW、y 軸方向を COLUMN で表します。

列と行には、自動的に 1 から順番に番号が付けられています。

Grid の使い方

Grid コンテナの中に、Grid アイテムを 6 つ作成してみましょう。

html
<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
</div>

css
.container {
  background-color: #eee;
  max-width: 48rem;
  border: 1px solid #000;
}
.item {
  padding: 1rem;
  text-align: center;
  color: white;
}
.item-1 {
  background-color: darkgreen;
}

.item-2 {
  background-color: darkgrey;
}

.item-3 {
  background-color: darkkhaki;
}

.item-4 {
  background-color: darkslateblue;
}

.item-5 {
  background-color: darkgoldenrod;
}

.item-6 {
  background-color: darkred;
}

画面を確認すると、

1〜6 が縦並びに表示されました。

では、Grid レイアウトにしていきます。

Grid コンテナの display を grid にします。

css
.container {
  background-color: #eee;
  max-width: 48rem;
  border: 1px solid #000;
  display: grid;
}

列を指定する

Grid アイテムの列を指定したい場合は、grid-template-columnsを使用します。

今回は、3 列にしてみます。

css
.container {
  background-color: #eee;
  max-width: 48rem;
  border: 1px solid #000;
  display: grid;
  grid-template-columns: auto auto auto;
}

画面を確認すると、

Grid アイテムが 3 列になりました。

grid-template-columnsはautoだけではなく、具体的な長さも指定できます。

例えば、grid-template-columns: 15rem 20rem 10rem;とすると、

1 列目から幅がそれぞれ 15rem、20rem、10rem になりました。

Grid コンテナの幅を 48rem にしていたので、右端 8rem 分あまりました。

右端の余白を auto にすると、3 列目が残りの幅で埋まります。

また、grid-template-columnsは ◯fr で割合でも指定できます。

例えば、grid-template-columns: 1fr 2fr 1fr;とすると、

Grid コンテナの幅を、fr の合計数（今回は 1+2+1=4）で割って、それぞれの列にわりふりました。

今回は、1fr が 48/4=12 となりますので、1fr=12rem、2fr=24rem になりました。

行の高さを指定する

Grid アイテムの行の高さを指定したい場合は、grid-template-rowsを使用します。

grid-template-columnsと同様に、高さを指定すると、

css
.container {
  background-color: #eee;
  max-width: 48rem;
  border: 1px solid #000;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 15rem 20rem 5rem;
}

高さがそれぞれ変わりました。

Grid コンテナの高さを指定すると、高さの割合も指定できます。

css
.container {
  background-color: #eee;
  max-width: 48rem;
  height: 20rem;
  border: 1px solid #000;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr 2fr 1fr;
}