Question

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

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

Answer 1

Rectangle { id: head width: parent.width // line 23 height: 40 color: "#333333" radius: 10 ... Rectangle { id: body visible: root.state color: "#0d0d0d" width: parent.width // line 72 height: 0 anchors.top: head.bottom anchors.topMargin: 1 ...的常见答案不太正确。

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

如果您确实需要将列保持为精确相同的宽度，则应使用：

minmax(auto, 1fr)

grid-template-columns: repeat(3, minmax(0, 1fr));允许网格轨迹小至minmax(0, 1fr)但大至0，创建的列将保持相等。但是请注意，如果内容大于列或无法包装，则会导致溢出。

这里是an example，证明了差异。

Answer 2

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

lowLimit = np.ones(10) * 2
highLimit = np.ones(10) * 5

Answer 3

试试这个：

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

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

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

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

Answer 4

@Michael_B的答案差不多了。

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

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

Answer 5

这个怎么样？

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

Answer 6

这可以更好地分配列，并且列大小相同，而不管项目的大小是否调整。

       Season   |   Team  | W | AHWO
-------------------------------------
1  |  2017/2018 |  TeamA  | 2 | 1.75
2  |  2017/2018 |  TeamB  | 1 | 1.85
3  |  2017/2018 |  TeamC  | 1 | 1.70
4  |  2017/2018 |  TeamD  | 0 | 3.10
5  |  2016/2017 |  TeamA  | 1 | 1.49
6  |  2016/2017 |  TeamB  | 3 | 1.51
7  |  2016/2017 |  TeamC  | 2 | 1.90
8  |  2016/2017 |  TeamD  | 0 | N/A

Answer 7

这是一个简单的答案（至少在我看来）。我在没有答案的情况下得到了这个问题。这里的代码将“ 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 8

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

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

Answer 9

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

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

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

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

CSS Grid中的等宽列

9 个答案: