CSS Grid 中的等宽列答案

【问题标题】：Equal width columns in CSS GridCSS Grid 中的等宽列
【发布时间】：2018-05-16 00:59:44
【问题描述】：

我想让下面的 html 显示在 n 个相等的列中，无论使用 css 网格的行元素有两个、三个或更多子元素 - Flexbox 使这很容易，但我无法使用 css 网格完成它- 任何帮助表示赞赏。

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

【问题讨论】：

标签： html css grid css-grid

【解决方案1】：

TL;DR

grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;

repeat(3, 1fr) 的常见答案不太正确。

这是因为1fr 是关于可用（！）空间的分布。一旦内容变得大于轨道大小，这就会中断。默认情况下，它不会溢出并相应地调整列宽。这就是为什么不是所有1fr 都保证宽度相等的原因。 1fr 实际上只是 minmax(auto, 1fr) 的简写。

如果您确实需要列的宽度与您应该使用的精确相同：

grid-template-columns: repeat(3, minmax(0, 1fr));

minmax(0, 1fr) 允许网格轨道与0 一样小，但与1fr 一样大，从而创建保持相等的列。但是请注意，如果内容大于列或无法换行，这将导致溢出。

这里是 an example，它展示了不同之处。

最后，正如@wegry 和@zauni 指出的那样，要使其适用于任意数量的子列，您可以利用grid-auto-columns 和grid-auto-flow 并使用它：

grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;

【讨论】：

现在可以肯定，这是正确的答案。这对我来说似乎工作正常。
据我所知，这是唯一实际产生等宽列的。
也为我工作。对此表示赞许。
“一旦内容变得大于轨道大小，就会中断。” - 非常有价值的通知。谢谢！
当您不知道列数时，您可以这样做：grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column;

【解决方案2】：

@Michael_B 的答案就差不多了。

.grid-container {
   display: grid;
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
}

在撰写本文时，在 Chrome、Firefox 和 Safari 中为您提供一行大小相同的列。

【讨论】：

这应该是公认的答案，因为它是动态的，并且只需要主网格容器上的属性。
当凯文接受的答案不适合我时，这非常有效。出于某种原因，凯文的回答并没有均匀地分布宽度，而这样做。
这对我来说效果最好，因为我的列数是动态的，所以不能真正使用分数和百分比（据我所知）。
是的！简单优雅的解决方案！

【解决方案3】：

在您的网格容器上定义它。设置三列等宽。

grid-template-columns: repeat(3, 1fr);

【讨论】：

是否还有使用auto 的选项？ :)
对我没用。仍然被挤压的列，因此宽度不同。
正如@Kevin 所说的网格容器，您还需要在其上拥有display:grid;。
是否有两个、三个或更多子元素问题是询问任意数量的列，而不是硬编码为 3

【解决方案4】：

试试这个：

.grid-container {
   display: grid;
   grid-auto-columns: 1fr;
}

.grid-items {
   grid-row: 1;
}

否则，这里有一个可能有用的演示：jsFiddle

要了解fr 单元，请参阅以下帖子：

【讨论】：

这仍然不适合我 - 列占用 100% 的宽度，并堆叠在另一个下方 - 我错过了什么？
@user1678736 如果对您有帮助，请将答案标记为已接受（答案左侧的绿色复选标记）。
这里的问题完全相同：4 个盒子堆叠在一起，而不是彼此 next。
@Micheal_B 所需的行为如原始问题所述。将 grid-row:1 添加到子元素看起来是正确的解决方案，否则列将被堆叠。
是的，最终我使用了 4 次 '1fr' 来获得想要的结果（这个设计只需要 4 列）。有一件事是肯定的：'auto' 不会使列的宽度都相同。

【解决方案5】：

这样可以让列分布更好，不管item的大小是否不调整，列的大小都是一样的。

.row {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(33.33%, 1fr) );
}
.item {
  grid-column: span 1;
}

【讨论】：

【解决方案6】：

问题要求任意列数，而不是 3！所以用这个：

.grid-container {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}
.grid-container > * {
  overflow: hidden;
}

这样，它的孩子不需要有任何特定的类，甚至不需要是 div。

示例：https://codepen.io/dimvai/pen/RwVbYyz

【讨论】：

【解决方案7】：

这个怎么样？

.row {
  display: grid;
  grid-template-columns: repeat(3, calc(100% / 3));
}

【讨论】：

【解决方案8】：

这是简单的答案（至少在我看来）。我得到了这个问题，上面的答案对我没有帮助。这里的代码将“div”划分为相等的宽度和所需的列数。

//CSS

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; // no of 'auto's will be number of columns here it's 3
}

//HTML
<div class="grid-container">
    <div></div>
    <div></div>
    <div></div>
</div>

更多关于网格的信息可以在这里看到W3Schools

【讨论】：

【解决方案9】：

这些答案都不适合我，所以我尝试了另一种方法。就我而言，项目大小与内容有关。有些内容比其他内容大，因此所有列都不会相等。我刚刚用另一个具有 100% 宽度和 100% 高度的分区包装了任何项目，并且可以正常工作。

<div class="row">
    <div style="width: 100%; height: 100%;">
      <div class="item"></div>
    </div>
    <div style="width: 100%; height: 100%;">
      <div class="item"></div>
    </div>
    <div style="width: 100%; height: 100%;">
      <div class="item"></div>
    </div>
</div>

这对我有用，我希望对你有所帮助。

【讨论】：