时间戳

首页 > 解决方案 > 响应式布局，大屏幕上每行 3 个项目，小屏幕上每行 1 个项目

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

问题描述

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

单行包含 3 个项目的布局

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

3 个项目相互堆叠的布局

我从不想每行有 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>

标签： csslayoutresponsive-design

解决方案

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

推荐阅读