概要
- Pinterestっぽいレイアウトを実装する
- 高さが異なるカードを縦方向に敷き詰める
- 今回は2列で、左右の高さを不揃いに並べる
- Masonryレイアウトとも呼ばれているらしい
- 参考 : ピンタレストっぽいMasonryレイアウトをCSSだけで簡易的に実現する | blog.ojisan.io
失敗例
(実行結果が見にくいのでCodePenに移動するか下部の「0.5x」ボタンを押してください)
See the Pen column-layout_00 by reona396 (@reona396) on CodePen.
一見実装できているように見えるが、一番最後のハムスターのカードに文章が1文増えると…
See the Pen column-layout_01 by reona396 (@reona396) on CodePen.
レイアウトが崩れ、カードボックスとフッターの間に大きく余白ができてしまう。
実装例
See the Pen column-layout_02 by reona396 (@reona396) on CodePen.
-
cardをdisplay: inline-blockではなくdisplay: blockに変更 -
cardの下部の余白をmargin-bottomで調整するのではなく、
cardの外側に配置したcard-wrapperのpadding-bottomで調整する - カードの並び全体を中央揃えにするため、
card-boxの外側にcard-box-wrapperを配置してdisplay: flexで調整 - カード列の余白を調整するため、
card-boxのcolumn-gapを調整