css 网格网格模板列：

Question

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

行是水平的。我在我的电脑上使用 VS Code

.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”。