はじめに
今年の恵方巻の方角は「西南西」だそうです。毎年、一本食べ終わるまで沈黙を保てないDirector&EngineerのMARUです。
比較的新しいdisplay:gridタグでのレイアウトは活用されていますでしょうか。
最近ではよく見かけるようになりました。その要因のひとつはIE11のサポート終了でしょう。
2022年6月にIEのサポートが終了し、使いたくても使えなかった便利なタグがクライアントワークでも使えるようになってきました。おかげでマークアップ界隈の仕事は楽になってきた気がします。
しかし、このdisplay:gridがなかなかクセものです。
グリッドレイアウトには複雑なセル結合をおこなえる便利な機能がありますが、CSSをゴリゴリ書いて実装しようとすると直感的に扱えません。
そこで、今回はグリッドレイアウトで複雑なセル結合をする時に楽をしようというというテーマで書きます。
display:gridとは
技術資料
例えば以下のようなレイアウトを作成したい場合にはdisplay:gridは最適です。
tableタグでも同じようなことは出来ますが、tableでレイアウトをおこなうのは今では非推奨です。また、flxboxではここまで複雑なレイアウトを組むのは難しいです。
display:gridを使用するには、flexboxと同様に親となるタグに、グリッドレイアウトを使いますよ！と宣言する必要があります。
.parent {
display: grid;
}では、手始めに簡単なグリッドレイアウトをおこなってみます。
以下のような６つのdivを使用ます。
See the Pen Grid Layout Sample1 by laughstyle (@laughstyle) 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);では次に、上の例でDIV１とDIV4を縦に連結する場合はどのよにすればよいでしょうか。この辺りからgrid特有の分かりにくさが現れてきます。
まず、divは１つ減らしてdiv5までにします。div1に以下のように設定します。そうすると、div1が縦に連結されました。
.div1 {
grid-column: 1 / 2;
grid-row: 1 / 3;
}See the Pen Grid Layout Sample2 by laughstyle (@laughstyle) on CodePen.
このあたりから頭の中が？？？という状態になってきます。
どういうことか解説します。まず下の図をご覧ください。
列（column）と行（row）を区切る線があると仮定します。列番号１から2までを使うということで1/2と指定します。行番号１から３までを使うので1/3と指定します。スラッシュ（／）は（～）と置き換えて考えてみると分かりやすいかもしれません。
では次に、以下のような複雑なレイアウトを組みたい場合を考えてみます。
CSSをゴリゴリ書いて自力でやろうとしたのですが、まるでパズルを組んでいるかのようで頭の中が「イ～！」っとなってしまいました。
そこで今回の本題。そういう時に大変便利なツールがあります。「CSS Grid Generator」です。
CSS Grid Generatorの使い方
以下の画面からColumnsとRowsを好きな数値に変更します。
見本と同じレイアウトとしたいのでColumns５、Rows3としました。
次に、セルを選択していくのですが、ここでは選ぶ順番が大事です。
連結するセル同士はマウスでドラッグしなければ連結できません。また、連結しないセルも必ずクリックする必要があります。最初、この使い方が分からず悩みました。
まずは、div1となる部分からマウスで下のセルまでドラッグします。すると以下のようになります。
続けてdiv2、div3をひとつずつクリックします。順番を間違えないようにしましょう。
div4はdiv1と同様に下に向かってマウスでドラッグします。
あとは同じようにクリックしていくだけです。最終的に以下のようになりました。
「Please may I have some code」をクリックするとHTMLとCSSを取得できます。
コードをコピーします。右下の「Show HTML」をクリックすることで、HTMLとCSSのコード切り替えができます。
これで完成です。CSSでゴリゴリ書いている時間は何だったのかと思うほど簡単にセル結合できました。
See the Pen Grid Layout Sample3 by laughstyle (@laughstyle) on CodePen.
ちなみに、列と行の値を個別に変更することも可能です。
まとめ
最近ではAIを使用して仕事を進めることも増えましたが、こいういったジェネレーターも活用することでさらに仕事が捗ります。
他にもいろいろな便利なツールがありますので活用してみてはいかがでしょうか。
今回はdisplay:girdについて書いてみました。
数年前は対応ブラウザが少なく使用できなかったタグや、こんなタグいつの間に増えた？ということがあります。冒頭でも書きましたが、IEのサポート終了の影響が大きいですね。IEが消え去ったことによりマークアップ業界は楽になってきたように思いますが、常にアンテナを張っておかないと時代遅れとなって取り残されてしまうのがこの業界の怖いところですね。