【CSS】グリッドレイアウトの使い方について調べてみた②~基礎編~【grid】

Web

今回はグリッドレイアウトの超基礎的なグリッドアイテム配置方法をまとめてみました。

グリッドレイアウトの用語から知りたい方は下の記事もご覧ください。

関連記事
サムネイル：【CSS】グリッドレイアウトの使い方について調べてみた①~用語編~【grid】

【CSS】グリッドレイアウトの使い方について調べてみた①~用語編~【grid】

本記事では、「CSS Grid Layout Module」のことを「グリッドレイアウト」として統一して記事を書いています。

めちゃ簡単な
グリッドレイアウトの
設定方法

まず「グリッドレイアウト」は、「クリッドコンテナ」にしたい親要素に対して、display: grid;というスタイルを設定することで爆誕します！そして子要素は「グリッドアイテム」と見なされます。

.grid__container{
  display: grid;
}

ただし、この時点での見た目に変化はないかもしれません。横と縦の並びの設定をしていくことでグリッドレイアウトらしくなっていきます。

横の並びの設定（列の設定）

横の並びの設定ということで、超基本的な下記コードを用意してみました！

<div class="grid__container">
  <div class="grid__item--1">アイテム１</div>
  <div class="grid__item--2">アイテム２</div>
  <div class="grid__item--3">アイテム３</div>
  <div class="grid__item--4">アイテム４</div>
  <div class="grid__item--5">アイテム５</div>
</div>
.grid__container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

横の並びを設定するのが、grid-template-columns プロパティです。

“横の並びを設定”と書きましたが、
正しくは「垂直方向のグリッドラインの名前」や「列のサイズ（列トラックのサイズ）」を指定するプロパティです。『“横並び”なのに列？』というのは混乱を招くかもしれませんが、あえて、まずは直感的な見出しにしました。

「値」に記述されたスペースで区切られた各数値は、左から順番に、1列目、2列目……と各列に対応したサイズとして設定されます。そしてグリッドアイテムが列で収まらない場合は、次の行に折り返されます。

ですので、
例えば2つのサイズを指定すれば2列のレイアウトになります。

ちなみに grid-template-columns プロパティの「グリッドラインの名前を指定する」という設定は、初心者のうちはあまり使わないと思うのでとりあえず気にしなくて問題ないかと思います。一応記述方法としてはこんな感じ。

.grid__container{
  display: grid;
  grid-template-columns: [start first] 1fr [middle second] 1fr [end last] ;
  grid-gap: 10px;
}

上記の例では、1つ目のグリッドには『start』『first』という2つの名前が付けられています。スペースで区切ることで複数名前を付けることができるようですね。日本語も使えるようですが、アルファベットが無難だと思います。

しれっと記述してますが、
grid-gap プロパティは、グリッドトラック同士の隙間のサイズを設定します。値が1つだと行トラックと列トラックと両方、値が2つだと1つ目が行トラック、2つ目が列トラックに対応します。

margin プロパティや padding プロパティとうまく使い分けて上手にレイアウトできるといいですね！

縦の並びの設定（行の設定）

縦の並びの設定、
正しくは「水平方向のグリッドラインの名前」や「行のサイズ（行トラックのサイズ）」を指定するのは grid-template-rows プロパティです。

<div class="grid__container">
  <div class="grid__item--1">アイテム１</div>
  <div class="grid__item--2">アイテム２</div>
  <div class="grid__item--3">アイテム３</div>
  <div class="grid__item--4">アイテム４</div>
  <div class="grid__item--5">アイテム５</div>
  <div class="grid__item--6">アイテム６</div>
  <div class="grid__item--7">アイテム７</div>
  <div class="grid__item--8">アイテム８</div>
</div>
.grid__container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-tamplate-rows: 50px 100px;
  grid-gap: 30px 10px;
}

例として、grid-tamplate-rows: 50px 100px;と記述してみました。これは行トラックのサイズをそれぞれ順番に設定しています。1行目は 50px、2行目は 100px のサイズに設定されます。

2行目に入りきらなかったグリッドアイテムの縦幅は auto と同じになります。ある意味、縦の並びも横の並びも grid-template-columns プロパティによって制御されているような感じですね。

まとめ

かんたんはグリッドレイアウトは、親要素（グリッドコンテナ）に３つのスタイルを設定することができました。グリッドレイアウトたらしめる display: grid;、列の設定をする grid-template-columns プロパティ、行の設定をする grid-template-rows プロパティ。もう一つ追加で、グリッドトラック同士（行と列）の隙間のサイズを設定する grid-gap プロパティ。

まずは、これらを使ってグリッドレイアウトを楽しんじゃいましょう！やってみたら意外と簡単ですね！何ならフレックスよりも直感的な印象です。

参考・出典

・MDN. 「グリッドレイアウトの基本概念」. https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout, 2024年9月28日閲覧。

トップへ戻る