响应式布局，大屏幕上每行 3 个项目，小屏幕上每行 1 个项目答案

【问题标题】：Responsive layout with 3 items per row on larger screens and 1 item per row on smaller screens响应式布局，大屏幕上每行 3 个项目，小屏幕上每行 1 个项目
【发布时间】：2021-03-19 16:40:51
【问题描述】：

我想在大屏幕上将 3 个等宽的项目放置在一行中，拉伸项目以填充可用空间。

但是，当项目的宽度小于 200 像素时，我想将它们全部显示在单列中。

我不想每行有 2 个项目。任何普通的 CSS 解决方案，例如 CSS flexbox 或 CSS 网格都是可以接受的。

以下代码不正确，因为有时每行显示 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>

【问题讨论】：

标签： css layout responsive-design

【解决方案1】：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;

}
        
.item {
background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

        
@media (max-width: 992px) {
    .container {  grid-template-columns: auto;}
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

【讨论】：

我猜如果没有@media 查询就不可能做到这一点？

【解决方案2】：

.item {
  height: 200px;
  background-color: blue;
}

.container {
  display: grid;
  grid-template: 1fr 1fr 1fr / repeat(200px, minmax(200px, 1fr));
  grid-gap: 1rem;
}

.grids {
  background-color: red;
}

<div class="grids">
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

【讨论】：

repeat(200px 不是有效的 CSS