CSS 网格中的等宽列

Question

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

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

Answer 1

repeat(3, 1fr)

的常见答案不太正确。

这是因为

1fr

是关于可用（！）空间的分配。一旦内容变得大于轨道大小，这种情况就会中断。默认情况下，它不会溢出并相应调整列宽。这就是为什么并非所有

1fr

都保证具有相同的宽度。

1fr

实际上只是

minmax(auto, 1fr)

的简写。

如果您确实需要列的宽度完全相同，您应该使用：

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

minmax(0, 1fr)

允许网格轨道小至

0

但大至

1fr

，从而创建保持相等的列。但是，请注意，如果内容大于列或无法换行，这将导致溢出。

这里是一个示例，展示了差异。

Answer 2

@Michael_B 的答案就差不多了。

.grid-container {
   display: grid;
   grid-auto-columns: minmax(0, 1fr);
   grid-auto-flow: column;
}

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

Answer 3

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

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

Answer 4

试试这个：

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

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

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

要了解

fr

装置，请参阅以下帖子：

• CSS Grid 有 flex-grow 功能吗？
• CSS网格布局中百分比和fr单位的区别

Answer 5

这样可以让列更好地分布，并且无论项目大小是否不调整，列的大小都是相同的。

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

Answer 6

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

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

这样，它的子元素（在 css 中使用“">*”选择）不需要有任何特定的类，甚至不需要是

div

。

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

Answer 7

这个怎么样？

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

Answer 8

全宽响应式换行

在移动设备上缩小尺寸时，这些答案都不是全宽或换行到新行。如果您想要类似于引导程序的东西，这可能就是您正在寻找的东西。请注意，200px 是换行到新行的下限。

.grid-container {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Answer 9

这是简单的答案（至少在我看来）。我遇到这个问题，上面的答案对我没有帮助。这里的代码将“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

Answer 10

这些答案都不适合我，所以我尝试了另一种方法。就我而言，项目大小与内容相关。有些内容比其他内容大，因此所有列不会相等。我只是用另一个具有 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>

这对我有用，希望对您有帮助。