CSS Grid中的等宽列

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

在网格容器上定义它.设置三个宽度相等的列.

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

Answer 3

@Michael_B的答案几乎在那里。

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

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

Answer 4

该问题要求任意数量的列，而不是 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 5

试试这个:

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

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

否则,这是一个可能有用的演示:jsFiddle

要了解该fr单元,请参阅以下帖子:

• CSS Grid是否具有flex-grow功能？
• CSS网格布局中百分比和fr单位之间的差异

Answer 6

全宽响应式换行

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

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

Answer 7

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

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

Answer 8

这个怎么样？

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