span 1 / span 1`在CSS网格中是什么意思？

Question

我正在使用Tailwind的新CSS网格功能。它具有Grid Column，其值为span 1/span 1类别，为col-span-1为span 2/ span 2类别，依此类推，直到col-span-2类别为span 12/span 12。

但是，我在实践中无法理解col-span-12。我可以理解span 1/ span 1。我也可以理解1 / span 1，但似乎无法掌握span 1/ 3。

Answer 1

[问问题时，我正在修补以下CodePen，似乎已经找到了解决方案。

span 1/ span 1

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

<div class="grid grid-cols-3 gap-3 bg-gray-300">
    <div class="bg-green-500 text-white text-6xl flex items-center justify-center border-8 border-black col-span-1">1</div>
    <div class="bg-indigo-500 text-white text-6xl flex items-center justify-center border-8 border-black">2</div>
    <div class="bg-red-500 text-white text-6xl flex items-center justify-center border-8 border-black">3</div>
    <div class="bg-yellow-500 text-white text-6xl flex items-center justify-center border-8 border-black">4</div>
</div>

注意，中的col-span-1。 1指col-span-1。

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

span 1 / span 1

<div class="grid grid-cols-3 gap-3 bg-gray-300">
    <div class="bg-green-500 text-white text-6xl flex items-center justify-center border-8 border-black col-span-2">1</div>
    <div class="bg-indigo-500 text-white text-6xl flex items-center justify-center border-8 border-black">2</div>
    <div class="bg-red-500 text-white text-6xl flex items-center justify-center border-8 border-black">3</div>
    <div class="bg-yellow-500 text-white text-6xl flex items-center justify-center border-8 border-black">4</div>
</div>

包含为1的col-span-2。它也可以覆盖span 2 / span 2的空间。

输出看起来如下：

2

如果将放到col-span-4中，则将无法使用，因为我们已将网格指定为父级1中的div的第3列。除此之外，grid-cols-3覆盖了从其开始的位置。