Question

我有10个div（64像素x 64像素），我想在最多5列（适用于大和超大视口）和最少3列（适用于小视口（如iPhone 7等））中显示。

我正在尝试使用CSS Grid来做到这一点，但无法做到最少的列部分（即使有足够的空间容纳3个列，它也会变成2列）。

body {
  background-color: wheat;
}

.parent {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 140px));
  max-width: 800px;
}

.child {
  height: 64px;
  width: 64px;
  background-color: brown;
}

<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

网格容器的最大宽度为800px。

这是Codepen

的链接

编辑：如果可能的话，我只想使用CSS Grid来完成此操作，即不使用Media Queries或Flexbox。

Answer 1

您可以通过使用@media查询grid-template-columns: repeat(5, 1fr);（用于大型设备）和grid-template-columns: repeat(3, 1fr)获得所需的输出；小型设备

body {
  background-color: wheat;
}

.parent {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 1fr);  
}

.child {
  height: 64px;
  width: 64px;
  background-color: brown;
}

@media(max-width:540px){
  .parent {
     grid-template-columns: repeat(3, 1fr);
  }
}

<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

Answer 2

我想这是你要找的。

body {
  background-color: wheat;
}

.parent {
  display: grid;
  grid-gap: 2vw;
  grid-template-columns: repeat(auto-fill, minmax(100px, 120px));
  max-width: 800px;
}

.child {
  height: 64px;
  width: 64px;
  background-color: brown;
}

<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

我已更改-从grid-template-columns: repeat(auto-fill, minmax(100px, 140px));到grid-template-columns: repeat(auto-fill, minmax(100px, 120px));

因为在小屏幕中，孩子将占用140px保留的区域，导致它在小屏幕中分成2列，现在我将其更改为120px和grid-gap: 2vw;来解决这个问题问题。

我希望这对您有所帮助。

Answer 3

不确定您是否介意流动的列，但是使用媒体查询可以做到：

.parent { grid-template-columns: repeat(3, 1fr); } 用于小屏幕

和

.parent { grid-template-columns: repeat(5, 1fr); } 适用于大屏幕

Answer 4

对于最大宽度，@ weBBer的答案还可以，但是您应该设置最小宽度（N）px

Answer 5

我希望这对您有帮助

https://codepen.io/pandiyancool/pen/oPmgeP

css

body {
  background-color: wheat;
}

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  height: 80px;
  padding: 25px;
  background-color: brown;
  border: 1px solid #ccc;
  flex: 1 1 160px;
  flex-basis: 20%;
}

使用CSS网格设置最小和最大列数

5 个答案: