代码之家 › 专栏 › 技术社区 › jacobdo

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

css-grid css3 css

0

jacobdo · 技术社区 · 7 年前

我正在尝试使用css网格创建以下布局:

到目前为止,我所做的尝试如下:

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

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

但是我很难使列计数动态化。这根本不可能吗?

1 回复 | 直到 7 年前

1

2

wiiiiilllllll 7 年前

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;
}

这是一个密码笔: https://codepen.io/wiiiiilllllll/pen/ZRMxpo