More than 1 year has passed since last update.

高さが違うコンテナをgridで綺麗に並べる

Last updated at 2022-04-11Posted at 2021-12-02

【やりたいこと】

PC、タブレット表示でMasonryっぽい並びをgridレイアウトで実装する。ウィンドウ幅縮小で並び替えはしない。スマホサイズになると昇順で縦に並ぶ。

See the Pen grid layout by yoshida (@yoshi090) on CodePen.

ポイントは以下です。

style.scss

grid-template-areas:
    "a1 a2"
    "a1 a2"
    "a1 a4"
    "a3 a4"
    "a3 a6"
    "a5 a6"
    "a5 a7"
    "a5 a7";

エリアの指定を上記のようにすることで左右のコンテナの数や高さが違うものも勝手に揃ってくれます。

style.scss

grid-template-rows: 0.6fr 0.8fr 0.9fr 0.6fr 0.8fr 0.9fr 0.9fr 0.4fr;

また上記のrow（行）の高さを編集することで各コンテナの高さも調節できます。
IE11でも同様に表示されます（要ベンダープレフィクス）。

Flexboxで実装するのは難しそうでした。
例えばスマホでのコンテナの並びが縦に「１→３→５→２→４→６→７」ならば左右でコンテナとして括れるので可能かと思います。