CSS Gridレイアウト(サイズが変化する要素をタイル状に並べたい)

Question

Gridを使用して、複数のカードをタイル状に並べたいです。

現在、コンテンツの内容によって高さが変わるカードがあります。カードのwidthは265px固定で、ウィンドウサイズによって横にrepaetする枚数を変えたいので、以下のようにしています。

.project-list {
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(auto-fit, 265px);
 }

しかしコンテンツの内容によってカードのheightが変わるので、以上のコードだとカードのtopが揃ってしまい、変なスペースができてしまいます。
heightもコンテンツに合わせて、詰めて表示させるにはどうした良いでしょうか、、、

Masonryは使用しない方向で考えています

Answer 1

.project-listの孫要素に背景色を指定していませんか?

以下のように、<a>に背景色を指定している場合、隙間が出てしまうと思います。

<ul class="project-list">
  <li>
    <a href=""></a>
  </li>
</ul>

もしHTMLが↑の感じで、下辺がガタガタになってしまっているというのが質問内容なら、以下のようにすると解決すると思います。

.project-list > * > * {
  height: 100%;
}

Answer 2

横並びで、高さが低いカードでできる余白を上に詰める感じでしょうか。
だとしたら、CSSだけでは難しいかと。

縦並びで上に詰めて折り返すなら Flexbox で可能ですが。

Codepenサンプル

Comments

[tarako328]

はい。
そうですね、、調べましたができなさそうです。代替案、ありがとうございます！