概要
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 を調整
↧