【css】Flexからgridレイアウトへ - らいちのヒミツ基地

IE11のサポートが切れた今、そろそろgridレイアウトを積極的に導入でるようになりました。flexレイアウトからgridレイアウトへの移行をデザイナー観点で簡単に使うとこだけ解説します。

gridレイアウトの利点

gridだと列数だけでなく行数も指定しないといけないと思われがちですが、実際は列数の指定だけで行が増えても繰り返してくれます。

どっちが行だか列だかわからなくなったときはテキストを思い出してください。
テキストエディタで行番号をふれるのが行です。

gridのメリットは色々ありますが、flexboxレイアウトより優れている点は下記の三点です。

親要素で子要素のサイズを制御できる
子要素側でそれを上書きできる
justify-content: space-between;の最終行の処理

親要素で子要素のサイズを制御

例えば
「大見出しと8文字分の小見出しと段落、隙間は1文字分」
というありふれた文書構造のhtmlをtableレイアウトっぽく配置してスマホでは縦並びにしたい場合のhtml

<section>
<h2>個展開催案内 </h2>
<h3>日時</h3>
<p>2023年10月26日(木)〜31日(火)</p>
<h3>会場</h3>
<p>銀座画廊「美の起原」</p>
<h3>内容</h3>
<p>阿豆らいち作品の原画展示</p>
</section>

flexレイアウト

flexだと子要素側でしか幅を設定できないのでこうなります。

section{
  display: flex;
  flex-wrap: wrap;
}
h2{
 width: 100%;
margin-bottom: 1em;
}
h3{
 width: 8em;
margin-bottom: 1em;
}
p{
 width: calc(100% - 8em);
margin-bottom: 1em;
}
@media screen and (max-width: 768px) {
 section{
  flex-direction: column;
 }
 h3,p{
 width: 100%;
 }
}

gridレイアウト

これがgridレイアウトだと親要素だけで設定できるのでこんなにスッキリ、直感的に。
子要素側での幅指定はh2で「2列分使う」と記述しているだけになりました。

section{
  display: grid;
  grid-template-columns: 8em auto;
  grid-row-gap: 1em;
}
h2 {
    grid-column: span 2;
}
@media screen and (max-width: 768px) {
section{
  grid-template-columns: 100%;
}
h2 {
    grid-column: span 1;
}

space-betweenの最終行問題

また、3列以上のレイアウトの際

<section>
<p>俺様</p><p>俺様</p><p>俺様</p><p>俺様</p><p>俺様</p>
</section>

flexレイアウト

flexボックスだとこう書きますが

section{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
p{
  width: 33.3%;
}

このように最終行も左右寄せになっていまい、行×列で割り切れないと空タグ入れるなどの処理を施す必要が生じます。
カード型レイアウトなどでデザイナーをずっと悩ましていた事例です。

gridレイアウト

gridレイアウトでは、以下の記述だけで思った通りの結果が得られます。

section{
  display: grid;
  justify-content:space-between;
  grid-template-columns: 1fr 1fr 1fr ;
}

その他

上下中央揃えも

flexだと左右と上下それぞれをcenterに設定する必要がありますが

section{
  display: flex;
  justify-content: center;
  align-items: center;
}

gridならplace-itemsの1行だけで上下左右中央に設定できます

  section {
  display: grid;
  place-items: center;
}

htmlレイアウトの歴史

ここでhtmlのレイアウトの変遷について、自身の経験をもとに語ります。

table

もともとhtml4.0の頃にtableタグでレイアウトを施すWEBサイトが大勢となり、視覚障害者のための読み上げブラウザでの動作や、検索エンジンのロボットがWEBページの内容を判断するのが困難な事態になりました。

float

こうして
「htmlは文書構造を大事に！装飾はcssで！」
となったのがxhtml。

ここでtableレイアウトの代わりに出てきたのがfloatレイアウトです。
指定要素を左右いずれかに寄せて、続く要素を回り込ませることでレイアウトを配置していました。
ところがflortはその名の通り要素が浮いてしまい使いづらいことも多く、またレイアウトのためにとにかくdivタグを使いまくることになり、再び文書構造が怪しくなってきました。

flexbox

HTML5+CSS3が実装され、divダグの代わりにheade、main、footerタグなどが使えるようになりました。
そしてfloatレイアウトからflexboxによるレイアウトが主流となりました。

しかし、flexboxもまた「浮かないfloat」と言ったテイで、要素を順番に並べていく概念。結局のところtableレイアウトと同様の使いやすさは実現できていませんでした。

grid

IE11のサポートが終了した現在では、ついにgridレイアウトが主要ブラウザ全てでサポートされるようになり、tableに近い考え方でレイアウトが組めるようになりました。

CSS Grid Layoutのブラウザサポート状況

https://caniuse.com/css-grid

サムネイルイラスト

「グリッドとフレックス」というお題作って心の赴くままに描いたイラストがコチラ。

…わかる人にだけわかればいいんだ！#絵描きさんと繫がりたい #冬の創作クラスタフォロー祭り #絵柄が好みって人にフォローされたい pic.twitter.com/icpcOwhb47
— 阿豆らいち (@AzuLitchi) 2022年12月26日