floatやFlexboxで横に並べたリストの高さを揃えない方法

Question

実現したい事

リストをdisplay:flexやfloatで横並びにすると、
liの高さが隣の要素の高さに依存して
下記の2つの画像のように余白が生まれてしまうと思いますが、この余白を無くしたいです。
（画像ではliに色をつけています）

これを、下記の画像のようにliの要素の高さのみで余白なく並べたいです。

やっている事

最後の画像には下記のCSSを充てています。
flex-direction: column;で縦並びにし、高さを設定して折り返す事で2列にしていますが
多言語対応サイトなので言語毎に文字数が変わってしまう為、できればheightを設定したくありません。

ul{
  display: flex;
  flex-wrap: wrap;  
  flex-direction: column;
  height: 500px;
}

調べてもなかなか理想のものが見つかりませんでしたので、
もし他の方法があればと思い、質問させていただきました。
何卒宜しくお願い致します。

Answer 1

flex や float では実現不可能だと思いますが、column にしてしまえば似た形にはなります。

【column-count - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/column-count

【マルチカラムレイアウトとは？columnプロパティについて】
https://qiita.com/nezurika/items/dbc4e5987f77df94df29

【CSS3：簡単に段組を作れる「columns」プロパティ | ハックノート】
https://hacknote.jp/archives/5274/

Comments

[fu_ji]

ご回答ありがとうございます。
解決いたしました！
いままで横並びにするにはFlexbox、table、floatしか自分の選択肢にはありませんでしたが
このプロパティを覚える事でより簡単に色んな表現ができますね。
ありがとうございました！