CSSでMasonary

というとflexboxになるのかという話ですが、Github時代にこんな面倒くさいプロパティ使いたくない方にはこれ。
https://github.com/jh3y/driveway
ZIPでダウンロードするかクローンしてくる。

ブロックをタイル状に並べてくれるやつです。
driveway demo

ZIPを解凍したら問題がなければdist/driveway.min.cssを使えばOKかと思います。もしミニマライズされていないものを使いたいときは、driveway.cssを使います。

コンテナ

全体はこれで囲ってやる。dwクラス自体は幅100%です。

<div class="dw"></div>

パネル

パネルでいっぱい並べる。

<div class="dw">
....
<div class="dw-panel ">
  <div class="dw-panel__content">
    <p>Panel content.</p>
  </div>
</div>
....
</div>

基本これだけできれいに並びます。
詳しい使い方は、Githubのusageで。


[CSS]レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway

Last update: 2018.01.08 (月)