是否有可能总是有偶数列自动填充？

Question

嘿，我是 CSS 网格的新手。看看下面的例子：

.platform {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 20px;
}

.item {
  width:100%;
  background-color:#aaa;
  padding:10px;
  box-sizing:border-box;
  text-align:center;
}

.wrapmed {
  max-width:400px;
}

.wrapsmall {
  max-width:300px;
}

<div class="platform">
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
  <div class="item">d</div>
</div>

<br/><br/>

<div class="wrapmed">
  <div class="platform">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
  </div>
</div>

<br/><br/>

<div class="wrapsmall">
  <div class="platform">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
  </div>
</div>

基本上网格效果很好。但是，我永远不想打破网格，使 3 个项目在顶部，而只有一个项目在下一行。

我想要 4 列、两列或一列。（如何）我可以实现这种行为吗？

编辑：代码片段现在显示了三种可能的情况。情况 2 是不需要的。

Answer 1

你可以使用偶数或奇数的伪 class child 所以 .item nth-child(even)

Answer 2

您可以嵌套平台 div 以控制列的折叠方式。

我添加了一个父平台元素，将两个子平台元素并排放置或放置在另一个平台元素之上。
我在子平台元素中将这些项目成对或成对分组。

现在当屏幕尺寸缩小时，子平台元素将首先堆叠创建一个 2x2 网格。
如果屏幕进一步缩小，子平台内的项目将堆叠并创建一个 1x4 网格。

.platform {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 20px;
}

.item {
  width:100%;
  background-color:#aaa;
  padding:10px;
  box-sizing:border-box;
  text-align:center;
}

.wrapmed {
  max-width:400px;
}

.wrapsmall {
  max-width:300px;
}

<div class="platform">
  <div class="platform">
    <div class="item">a</div>
    <div class="item">b</div>
  </div>
  <div class="platform">
    <div class="item">c</div>
    <div class="item">d</div>
  </div>
</div>

<br/><br/>

<div class="wrapmed">
  <div class="platform">
    <div class="platform">
      <div class="item">a</div>
      <div class="item">b</div>
    </div>
    <div class="platform">
      <div class="item">c</div>
      <div class="item">d</div>
    </div>
  </div>
</div>

<br/><br/>

<div class="wrapsmall">
  <div class="platform">
    <div class="platform">
      <div class="item">a</div>
      <div class="item">b</div>
    </div>
    <div class="platform">
      <div class="item">c</div>
      <div class="item">d</div>
    </div>
  </div>
</div>

Answer 3

这是另一个迟到的答案，但我想我会在这里记录下来，以供以后遇到同样问题的观众使用！从已接受的答案中汲取灵感，我设法找到了一个对我来说效果更好的解决方案，但是改用了 flexbox。

我使用了 flexbox 而不是 CSS 网格，因为我对这个功能的要求是有几张卡片，它们只能以偶数折叠，但不要超过最大宽度，因为这会使卡片看起来当子平台最初会崩溃时很奇怪，因为它们的容器太宽并且卡片扩展到网格的宽度 - 即我被限制在列网格轨道的宽度，而使用 flexbox 你不是。

（如果有办法用网格做到这一点，请发表评论让我知道 - 我尝试设置项目的最大宽度，但随后无法让它们在网格单元格内居中，同时也在一个我选择的最小和最大宽度）

我在这里所做的是使用嵌套容器的相同想法，但是它们与接受的答案中的不同（请注意子容器 class 中的附加 flex 属性）。然后，我使用 flex: 1 0 50px 中的 flex-basis 属性设置我想要的最小项目宽度，并使用 max-width: 100px 设置我想要的最大宽度。因此我有一个在 50-100px 之间增长的 flex 项目。

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-evenly;
}

.sub-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-around;
  flex: 1 0 50px;
}

.item {
  flex: 1 0 50px;
  max-width: 100px;
  height: 100px;
  background-color: #aaa;
  padding: 10px;
  text-align: center;
}

<div class="container">
  <div class="sub-container">
      <div class="item">a</div>
      <div class="item">b</div>
  </div>
  <div class="sub-container">
      <div class="item">c</div>
      <div class="item">d</div>
  </div>
</div>

是否有可能总是有偶数列自动填充？

Is it possible to always have an even number of columns with auto-fill?

html

css

responsive-design

css-grid