css Grid的grid-template-columns：

Question

为什么这4列？我的意思是，当我使用flexbox时，我们将其称为4行。现在，行成为CSS网格中的列？你能解释一下吗？

行是水平的。我在我的电脑上使用vs代码

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

Answer 1

想象一下，页面上有4条等距的垂直线（第一行和最后一行代表包含元素的边缘）。 .item1 和 .item5 放在第一列内， .item2 和 .item6 放在第二列内，依此类推上。

通过在“ grid-template-columns”属性中重复“ auto”四次，可以在 .grid-container 网格内设置4列。换句话说，网格中的列数取决于在grid-template-columns属性上设置的值的数目。

您可以使用网格系统引入的新度量单位来简化此过程。假设您希望网格中的第二列和第四列的大小是第一列和第三列的两倍。您可以简单地声明以下内容：

grid-template-columns: 1fr 2fr 1fr 2fr;

小数表示每列相对于其他列的大小和数量将使用多少空间。

要设置网格内的行的大小和行数，请使用“ grid-template-rows”

对于这两个属性，您还可以将“ repeat”函数作为值传递：

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

这等效于在网格容器上设置“ 1fr 1fr 1fr”。