CSSのみでMasonryライクな段組レイアウト

Result

過去はJSで何とか実装していたPinterestのようなMasonryレイアウトは、column-widthを使ったCSSのみで簡単に実装可能となりました。
column-countも併用すればカラム数の指定も出来ますね。

css

article {/*CSSカラムのセッティング*/
 column-width: 7em;
 column-gap: 1em;
}

section {/*各ボックスのスタイル*/
  display: inline-block;
  margin: 0.25rem;
  padding: 1rem;
  width: 100%;
  background: #efefef;
}

html

<article>

  <section>
    <p>Lorem ipsum dolor sit amet, consectetur.</p>
  </section>
  
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.</p>
  </section>
  ・
  ・
  ・
  ・
  ・
</article>

can i use

マルチカラムレイアウトのブラウザサポート状況です。

via

Pure CSS Masonry Layout