masonryレイアウト。masonryを翻訳すると、石積みって意味らしい。
Pinterestの一覧表示が有名で、スマホの狭いディスプレイの中でコンテンツを隙間なく埋められることから、masonryレイアウトが出始めた当時、要望が多かった。
当時はcss3も出始めで、どうしてもJavascriptに頼る必要があった。
jQueryのライブラリ使わないと、自作では無理やなって思った。

***

それがいまではcssだけで表現できるらしくて時々使ってみる。
でも問題がある。
時系列で並べたいコンテンツは特に
左から右へ、端まで行ったら折り返してまた左から右へ、というように並べたいのに、縦並びになってしまう。
このブログのアーカイブのページもそう。
下記のように。

See the Pen
masonry layout with css only 1 by oodegoo (@oodegoo)
on CodePen.

***

左から右へをやるなら、display:gridを使うといい、てどこかで見てやってみた。でもダメだった。
結局、高さをcssでうっすら指定しないといけない。このアイテムはちょっと高い、とか。
下の例だと、grid-row-endというプロパティ使って、is_span1からis_span3まで、3段階の行方向のサイズ（グリッドスパン）を決めてる。
WordPressなら、カテゴリごとに文字数とか決めて並べれば、案外うまくいくかもしれないけど。

See the Pen
masonry layout with css only 2 by oodegoo (@oodegoo)
on CodePen.

***

Javascriptで動的にアイテムの高さを取得して行数の計算とかする必要がある。
もうそれなら、ライブラリ導入しようかなって思っちゃう。

このブログの場合時系列である必要があまりないので、この記事の最初の石積みレイアウトでいい。
そもそもmasonryである必要もないため、普通に縦並びにしようか悩んでる。