高さが可変のグリッドレイアウトをcssで実装することが可能か教えていただきたいです。

Question

添付画像のように高さが可変のグリッドレイアウトを実装したいです。
高さの指定は無しで、テキスト量によって可変する仕様になります。

数字の順番が１２３...と続くような作りで５カラムで折り返しをしたいです、
jsを使わずにcssだけでこのような実装は可能なのでしょうか。

Answer 1

CSS grid masonry で実現できます。

Masonryレイアウトをたった3行のシンプルなCSS Gridで簡単に実装できるようになります | コリス
CSS Layout API で Masonry Layout | blog.jxck.io

残念ながら現在のところ、動作するのは Firefox のみです。

CSS property: masonry | Can I use... Support tables for HTML5, CSS3, etc

ポリフィルはないようですが、JavaScriptによるフォールバックの記事がありました。
（動作未確認です）

A Lightweight Masonry Solution | CSS-Tricks

Comments

[testwp]

ご丁寧にありがとうございました。
参考になりましたm(_ _)m

Answer 2

「高さの指定は無しで、テキスト量は可変」でCSSだけでとなるとグリッドレイアウトでは難しいように思います。(JSを併用すればなんとかなる)

段組みレイアウトなら簡単に敷き詰められますが、並び順が縦方向になります。それでもいいなら、この方法がお勧めです。

段組みレイアウトの使用 - CSS: カスケーディングスタイルシート | MDN

CSSのみでMasonryライクな段組レイアウト | かちびと.net

JSを使ってもいいのなら、Masonryを使うのが簡単です。

Comments

[testwp]

ご丁寧にありがとうございました。
参考になりましたm(_ _)m

Answer 3

こちらが参考になると思います。
https://www.webcreatorbox.com/tech/css-grid-layout

Comments

[testwp]

ご丁寧にありがとうございました。
参考になりましたm(_ _)m