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

Question

我想在较大的屏幕上将 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>

Answer 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>