display: gridでセル結合する時にイライラしない方法

この記事は、2年3ヶ月前に書かれました。

はじめに
1. display:gridとは
2. CSS Grid Generatorの使い方
まとめ

はじめに

display: gridなるレイアウト方法があることをご存知でしょうか。
最近よく見かけるようになりました。その要因のひとつはIE11のサポート終了でしょう。
2022年6月にIEのサポートが終了し、マークアップエンジニア界隈では祝杯の騒ぎがあったとかなかったとか。
このdisplay:gridがなかなかクセものでして、display:flexのようにすんなりと扱えません。

display:gridとは

CSS グリッドレイアウト - CSS: カスケーディングスタイルシート | MDN

...

例えば以下のようなレイアウトを作成したい場合にはdisplay:gridは最適です。
<table>タグでも同じようなことは出来ますが、<table>でレイアウトをおこなうのは今では非推奨です。flxboxではここまで複雑なレイアウトは組めません。

display:gridを使用するには、flexboxと同様に親となるタグに指定する必要があります。

.parent {
  display: grid;
}

では、手始めに簡単なグリッドレイアウトをおこなってみます。

See the Pen Grid Layout Sample2 by NK STUDIO (@wqrxfcpf-the-lessful) on CodePen.

grid-template-columnsにて、横何列にするかを指定します。
repeat(3, 1fr)の部分は1fr 1fr 1frと書いても同じです。frで指定すると、親要素一杯に広げて配置してくれます。幅を固定したい場合はpxや%指定でも構いません。frという値はgridでは度々使用しますので慣れておきましょう。
grid-template-rowsにて行の指定をします。
div４～５については、折り返して２行目に３つ並びます。

grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);

グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート | MDN

...

では次に、上の例でDIV１とDIV4を縦に連結する場合はどのよにすればよいでしょうか。この辺りからgrid特有の分かりにくさが現れてきます。
まず、divは１つ減らしてdiv5までにします。div1に以下のように設定します。そうすると、div1が縦に連結されました。

.div1 {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

See the Pen Untitled by NK STUDIO (@wqrxfcpf-the-lessful) on CodePen.

どういうことか解説します。まず下の図をご覧ください。
列（column）と行（row）を区切る線があると仮定します。列番号１から2までを使うということで1/2と指定します。行番号１から３までを使うので1/3と指定します。スラッシュは「～」と置き換えて考えると分かりやすいかもしれません。

では本題です。
以下のように複雑なレイアウトを組みたい場合、列と行番号を指定するのはなかなか難しいですよね。これを自力でやろうとしていたのですが、まるでパズルを組んでいるかのようで頭の中が「イ～！」っとなってしまいました。

そういう時に大変便利なツールがあります。「CSS Grid Generator」です。

CSS Grid Generator

CSS Grid Generatorの使い方

ColumnsとRowsを好きな数値に変更します。
見本と同じレイアウトにしたいのでColumns５、Rows3としました。

次に、セルを選択していくのですが、選ぶ順番が大事です。
また、連結するセル同士はマウスでドラッグしなければ連結できません。そして、連結しないセルも必ず順番にクリックしていく必要があります。この使い方が最初分からず悩みました。
div1となる部分からマウスで下のセルまでドラッグします。すると以下のようになります。