CSSだけでMasonryのように要素を敷き詰めて並べる|Blog|株式会社トライム
CSSだけでMasonryのように要素を敷き詰めて並べる
2016.09.26
![記事サムネイル](https://contents.try-m.co.jp/wp-content/uploads/2016/09/160926-1.jpg)
要素をタイル状に敷き詰めたい場合、Masonryは便利なプラグインですが、
最近はCSSだけでも、同じようにレイアウトすることが出来ます。
残念ながら親要素の幅に応じて敷き詰めなおしてくれるMasonryのような、便利な機能はありませんが、親要素の幅が固定で良ければ、とても簡単に実装できますよ。
対応ブラウザはIE10以降。
Firefoxはなぜか、まだベンダープレフィックスが必要です。
サンプルソース
HTML
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>
CSS
ul { font-size: 0; width: 630px; padding-left: 0; /* ulデフォルトののpadding-leftを消してます */ -moz-column-gap: 10px; column-gap: 10px; -moz-column-count: 4; column-count: 4; } li { font-size: 13px; width: 150px; height: 150px; margin-bottom: 10px; list-style: none; background-color: #999; } li:nth-child(2), li:nth-child(3), li:nth-child(6), li:nth-child(7) { height: 300px; }
column-gapとcolumn-countの数値をMedia Queriesで変更すれば、
ある程度レスポンシブ対応できます。
動作デモ
注意点
並びが横ではなく、縦に続いていくことに注意が必要です。
その為ブログのように、更新したコンテンツが順番に並んでいくようなものには不向きかもしれません。
Contact
お問い合わせ
トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。
03-6403-3259
受付:10:00 - 19:00
![ロゴ](/wp-content/themes/trym/images/top/contact-logo.png)