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
マルチカラムレイアウトのブラウザサポート状況です。
