如何使具有3列相同宽度但行的网格系统采用自动高度？

Question

我正在尝试制作类似画廊的东西，从materializecss主题中查看此网格系统：

  

https://themes.materializecss.com/pages/demo

-我要使3列宽度相同，所以：grid-template-columns: repeat(3, 1fr); -以及各列之间的间隙，因此：column-gap: 1em;

我内部有一个div，我想使div拥有自己的高度，而不是使所有div具有相同的高度。

enter image description here看看这个：

代码：

 <div class="puzzles_grid">


       <!--card1-->

        <div class="theblock">
        <div>
        <img class="puzzles_img" src="https://picsum.photos/200/100" alt="">
        </div>
        <div>
        prices 100$
        </div>
        </div>

        <!--card2-->

        <div class="theblock">
        <div>
        <img class="puzzles_img" src="https://picsum.photos/400/400" alt="">
        </div>
        <div>
        prices 100$
        </div>
        </div>

        <!--card3-->

        <div class="theblock">
        <div>
        <img class="puzzles_img" src="https://picsum.photos/300/700" alt="">
        </div>
        <div>
        prices 100$
        </div>
        </div>

        <!--card4-->

        <div class="theblock">
        <div>
        <img class="puzzles_img" src="https://picsum.photos/700/700" alt="">
        </div>
        <div>
        prices 100$
        </div>
        </div>

    </div>


<style>
    .puzzles_grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 1em;
        grid-row-gap: 1em;
    }
    .theblock {
        background-color: #E91E63;
        width: 100%;
    }

</style>