LoginSignup
23
22

More than 5 years have passed since last update.

CSS3 Multi-column Layout で Masonry のような(レスポンシブ)タイル・レイアウトを実現する

Last updated at Posted at 2016-09-27

👇こういうやつですね。

min.png

使いどころがあまり思いつかないかも知れませんが、
いつの間にかマルチカラム・レイアウトが現実的に使えるようになっていました。
これでレスポンシブなタイル・レイアウトが実現できます。

IE10以上OK(http://caniuse.com/#feat=multicolumn)
"> 1% in JP"(http://browserl.ist/?q=%3E+1%25+in+JP)

プロパティ

指定できるプロパティには下記のようなものがあります。

親要素

  • カラム数/幅 columns
  • カラム間隔 column-gap

子要素

  • 折り返し break-inside

※ 子要素はinline-blockにする必要があります。

Masonryぽいレイアウトサンプル

codepen

上記URL下段のセクションでは、「flexレイアウトでも同じように実現できるかも」と試しましたが、
親の高さを決め打ちしたり、アダプティブにしたとしてIEでは無理でした……。

23
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
22