css Grid 网格模板列 :

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”

对于这两个属性，您还可以传入一个“重复”函数作为值:

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

这相当于在网格容器上设置“1fr 1fr 1fr”。