使用CSS网格创建固定的行高/自动列数网格布局

Question

我正在尝试使用CSS网格创建以下布局：

到目前为止我尝试过的内容如下：

.grid {
    padding: 16px;
    display: grid;
    grid-template-rows: repeat(auto-fill, 200px);
}

img {
    height: 100%;
    width: auto;
}

但是我无法使列数动态化。根本不可能吗？

Answer 1

CSS网格不太适合您想要的布局。幸运的是，您可以使用flexbox实现类似的功能：

.grid {
    display: flex;
    flex-wrap: wrap;
}

img {
    flex: 1;
    height: 200px; /* or whatever fixed height you need */
    max-width: 100%;
    object-fit: cover;
}

这是一个Codepen：https://codepen.io/wiiiiilllllll/pen/ZRMxpo