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

Question

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

但是，当项目宽度小于 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>

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>

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

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

Responsive layout with 3 items per row on larger screens and 1 item per row on smaller screens

css

layout

responsive-design