Html “span 1/span 1”在CSS网格中是什么意思？

我正在使用Tailwind的新CSS网格功能。对于类

col-span-1

，它具有

span 1/span 1

值；对于类

col-span-2

具有

span 2/span 2

值，依此类推，直到类

col-span-12

具有

span 12/span 12

值

---

然而，我在实践中无法理解

span 1/span 1

。我能理解

1/span 1

。我也能理解

span 1/3

，但似乎无法理解

span 1/span 1

当我问这个问题时，我正在修补下面的代码笔，我似乎找到了解决办法

1.
2.
3.
4.

上面的HTML假定您已经链接了Tailwind CSS。它显示以下输出-

请注意，

1

中的

col-span-1

col-span-1

指

span 1/span 1

现在，让我们将代码更改为以下内容：

1.
2.
3.
4.

1

包含

col-span-2

，即

span 2/span 2

。它还可以覆盖

2

的空间

输出如下所示：

---

如果我们将

col-span-4

放入

1

，它将不起作用，因为我们已使用

Grid-cols-3

将网格指定为父

div

中的第3列。除此之外，

span

覆盖了它开始处的空间。

span 1/span 1

仅仅等于

span 1

，因为开始和结束是相等的：如果开始行等于结束行，请删除结束行（）谢谢

如果开始行等于结束行，请删除结束行

。这就非常清楚了：）如果我们将col-span-4放在1中，它将不起作用-->它将起作用，它将生成隐式列，使网格具有4列：。。仔细观察右边缘以注意间隙，如果您检查代码，您将看到一个额外的空列Thank you@TemaniAfif，它确实创建了一个隐式网格。我在Firefox开发工具中看到了这一点。人数增加到5人。虽然，我没有注意到任何差距：）编辑：无需担心我将行数从4增加到了6，并且可以清楚地看到第2行的5：）