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

【问题标题】：Is it possible to always have an even number of columns with auto-fill?是否有可能总是有偶数列自动填充？
【发布时间】：2018-10-10 17:21:35
【问题描述】：

嘿，我是 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 列，或 1 个。（如何）我怎样才能实现这种行为？

编辑：代码 sn-p 现在显示了三种可能的情况。案例 2 是不需要的。

【问题讨论】：

基本上......不，不是你拥有它的方式。 auto-fit 正在执行完全您要求它执行的操作。如果您不希望这种行为，我建议您重新考虑。
不适用于auto-fit / auto-fill。但是是的，媒体查询。 jsfiddle.net/d0kroo27
@Michael_B 是的，似乎媒体查询是唯一的解决方案：-/ 这种方法有缺点。

标签： html css responsive-design css-grid

【解决方案1】：

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

【讨论】：

你能发布一个工作示例吗？因为目前我不知道这将如何解决问题。

【解决方案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>

【讨论】：

迟到的答案，但很好的答案✌
这会在列上换行，所以如果我们有 a b c d 它会变成：a c b d 我想知道是否可以像这样换行：a b c d 也许这取决于先说唱，在列外还是列内。在我的情况下，内列首先换行。
您可以通过增加外列的最小宽度来强制先换行。此最小宽度需要至少是内部列的最小宽度 plus 填充的两倍。这是example。
嗨@AlexWolski - 这真是太棒了。我正在尝试创建类似的东西，但遇到了一些问题 - 这是我到目前为止所得到的jsfiddle.net/xdw7ma3u/1 • 想知道我是否过度设计了这个？（最里面的最小值是为了防止手机溢出）。我还有一些其他的 Q 围绕跨越、排水沟和试图避免硬魔术数字。有什么想法吗？

【解决方案3】：

这是另一个较晚的答案，但我想我会在此处记录此问题，以供将来遇到相同问题的观众使用！我设法找到了一个对我来说更好的解决方案，从接受的答案中获得灵感，但改用 flexbox。

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

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

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

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

【讨论】：