Masonryに似てるものをflexboxで使えますか

Question

こんにちは！
私は以下のようにmasonryのようなものを作ろうとおもっています。
期待のは以下のようになります。

ただし、どうしてもBOXを空いている部分に入れません。
私が試したコードは実装コードです。
試した部分は以下となります。

<div class="product-are-container">
                <div class="category-wrapper">
                    <div class="category-header">
                        <h1>Header</h1>
                    </div>
                    <ul class="category-items">
                        <li class="item-wrapper">
                            <div class="item-row-1">
                                <div class="item-title">
                                    <h3>Item Title</h3>
                                    <div class="item-subtitle-wrapper">
                                        <i class="fas fa-calculator">1</i>
                                        <i class="fas fa-box-open">100</i>
                                    </div>
                                </div>
                                <div class="item-price">
                                    <span>500$</span>
                                </div>
                                <div class="item-order">
                                    <i class="zmdi zmdi-shopping-cart-plus"></i>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                ・・・・省略部分・・・・
            </div>

・・・・省略部分・・・・
.product-are-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.category-wrapper {
  flex: 0.5fr;
  align-self: start;
}
・・・・省略部分・・・・

改善方法がご存じすれば、ぜひお教えてください。
よろしくお願いいたします。

2020/10/16追記

解決方法は見つけました。Columnを使います。
参考ですが、以下のように実装しています。
https://jsfiddle.net/z65ewsu0/

.product-are-container {
columns: 3 280px;
column-gap: 1rem;
font-size: 1.2rem;
}
.category-wrapper {
display: inline-block;
width: 100%;
break-inside: avoid;
text-align: center;
font-weight: bold;
}

Answer 1

まず、flex: 0.5fr; の部分ですが、fr は CSS Grid の単位で、Flexboxでは使えなかったと思います。
flex: 0 0 50%; と指定すべきでしょう。

FlexBoxで flex-direction: row; と行方向に展開する場合、行基準になるため、高さの違うブロックがあり下に余白ができても下の要素が上にくることはありません。

flex-direction: column;で列方向に展開したほうが希望に近いレイアウトになるでしょう。
ただし、幅が異なる要素があると列幅はいちばん広い要素に合わせられますので、今度は左右に余白ができます。

高さも幅も異なる要素がある場合は、CSS Grid を使うことになるでしょう。

追記

時間があったのでCSS GridでMasonry的なものを作成してみました。
質問の実装コードを元にしました。

CodePenサンプル

CSSのポイント部分は下記になります。
Gridの自動配置を最大限利用してます。(IE11には非対応です。)

.product-are-container {
  display: grid;
  justify-content: center;  /* 左右中央寄せ */
  grid-template-columns: repeat(auto-fill, 25rem); /* 横幅に合わせて繰り返す */
  grid-auto-rows: 3.2rem; /* 行を必用なだけ繰り返す */
  grid-auto-flow: dense; /* なるべく隙間なく敷き詰める */
  gap: 0.5rem;
  margin: 0.5rem;
}

/* 以下各ブロックが何行分占有するかを指定 */
.rs2 {
  grid-row: span 2;
}
.rs3 {
  grid-row: span 3;
}
.rs4 {
  grid-row: span 4;
}
.rs5 {
  grid-row: span 5;
}
.rs5 {
  grid-row: span 6;
}

HTMLではそのブロックが何行分の高さかを rs2 rs3 ・・・のクラスを設定することで指定します。

<div class="product-are-container">
  <div class="category-wrapper rs2">
    <!-- 2行分の高さ -->
  </div>
  <div class="category-wrapper rs3">
    <!-- 3行分の高さ -->
  </div>
  <div class="category-wrapper rs4">
    <!-- 4行分の高さ -->
  </div>
</div>

rs2 rs3 ・・・のクラスの設定はJavaScriptを使って各ブロックの高さを取得して設定するようにすれば手書きでちまちまする必要はなくなりますね。

Comments

[TruoG91]

ご回答ありがとうございます。
つまり、CSS　Gridを使ったほうがいいでしょうか？
私も初心者なので、詳しくなくてFlexを使っています。
flex-direction: column;だと1列になってしまいます。私の期待は２列です。
flexは不可だそうですね。Gridでやってみます。もし参考できるリンク・サンプルなどをお教えていただければ幸いです。

[hatena19]

flex-direction: column;
flex-wrap: wrap;
にして、height を適切に設定すれば2列になります。

Gridに関しては、下記が参考になると思います。

CSS Grid Layout を極める！（基礎編） - Qiita
https://qiita.com/kura07/items/e633b35e33e43240d363

CSS Grid Layout を極める！（場面別編） - Qiita
https://qiita.com/kura07/items/486c19045aab8090d6d9

[TruoG91]

参考リンクありがとうございます。
ただし、赤いBOXが増える可能性なので、heightを指定するのは不便ですね。
多分Gridだけだと不十分だと思い、Javascript処理が必要だそうですね。調べていきます。

[TruoG91]

いろいろありがとうございます。
わたしは解決方法が見つかりました。Columnを使うことにします。
参考ですが、これ（https://jsfiddle.net/z65ewsu0/）はソースです。
修正部分は以下となります。
.product-are-container {
columns: 3 280px;
column-gap: 1rem;
font-size: 1.2rem;
}
.category-wrapper {
display: inline-block;
width: 100%;
break-inside: avoid;
text-align: center;
font-weight: bold;
}
ご参照できれば幸いです。

[hatena19]

なるほど、アイテムの幅が同じなら、columns を使うのが簡単ですね。勉強になりました。