css - 砌体画廊布局

Question

我正在尝试构建一个垂直包裹的砌体布局，但它不起作用。我不知道是不是因为图像或 flexbox 的大小不是为此而构建的。

这是我的 CSS 代码

html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 960px;
            height: 80vh;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            column-gap: 0;
        }

        div {
            width: 33.3%;
        }

        img {
            width: 100%;
        }

这是我的 HTML：

<section class="container">
        <div>
            <img src="warsaw.jpg" alt="">
        </div>
        <div>
            <img src="old%20town%20warsaw.jpg" alt="">
        </div>
        <div>
            <img src="Krakow-Wawel-Castle.jpg" alt="">
        </div>
        <div>
            <img src="warsaw.jpg" alt="">
        </div>
        <div>
            <img src="Krakow-Wawel-Castle.jpg" alt="">
        </div>
        <div>
            <img src="old%20town%20warsaw.jpg" alt="">
        </div>
    </section>

标签： cssflexbox