小编gal*_*cin的帖子
响应式布局，大屏幕上每行 3 个项目，小屏幕上每行 1 个项目
我想在较大的屏幕上将 3 个宽度相等的项目放置在一行中，拉伸项目以填充可用空间。
但是，当项目宽度小于 200px 时，我想将它们全部显示在单列中。
我不想每行有 2 个项目。任何简单的 CSS 解决方案（例如 CSS flexbox 或 CSS grid）都是可以接受的。
以下代码不正确，因为它有时每行显示 2 个项目。
.item {
height: 200px;
background-color: blue;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 1rem;
}<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>4
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数