CSS Grid 中的 `span 1/ span 1` 是什么意思？答案

【问题标题】：What does `span 1/ span 1` mean in CSS Grid?CSS Grid 中的 `span 1/ span 1` 是什么意思？
【发布时间】：2021-07-27 11:16:25
【问题描述】：

我正在使用 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也能看懂，span 1/ span 1好像听不懂。

【问题讨论】：

span 1/ span 1 简单地等于 span 1 因为 start 和 end 相等：如果 start line 等于 end line，则删除 end line (@987654322 @)
感谢If the start line is equal to the end line, remove the end line。这样就很清楚了:)

标签： html css css-grid

【解决方案1】：

在问这个问题时，我正在修改以下 CodePen，我似乎找到了解决方案。

<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>

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

注意，1 中的 col-span-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 和grid-cols-3 中的第3 列。除此之外，span 从它开始的地方覆盖空间。

【讨论】：

如果我们将 col-span-4 放在 1 中，它将不起作用 --> 它会起作用，它会生成隐式列以使您的网格具有 4列：jsfiddle.net/m8y2nszj .. 仔细观察右边缘以注意间隙，如果您检查代码，您会看到一个额外的空列
谢谢@TemaniAfif，它确实创建了一个隐式网格。我在 Firefox DevTools 中看到了这一点。数字增加到 5。虽然，我没有注意到任何差距 :) 编辑：没关系，我将行从 4 增加到 6 并且可以清楚地看到第 2 行的 5 :)

【解决方案2】：

您接受的答案并没有真正解释发生了什么。 Temani Afif 在 cmets 中说，“跨度 1 /跨度 1 简单地等于跨度 1”。的确如此，但它没有解释 Tailwind 代码的用途，而这正是您的问题所要问的。

让我们考虑span 2 / span 2 示例。这是grid-column 属性的值，它只是grid-column-start 和grid-column-end 属性的简写。也可以这样写：

grid-column-start: span 2;
grid-column-end: span 2;

规范的“Grid Placement Conflict Handling”部分说：

如果展示位置包含两个跨度，则删除由 end grid-placement 属性贡献的一个。

因此，单独考虑的代码相当于：

grid-column-start: span 2;

如果您不为网格项目指定起始行，那也可以。但是假设您需要让项目从第三行开始……您可以将grid-column-start 设置为3，但现在您已经覆盖了之前的span 2 值。你真正想说的是：

grid-column-start: 3;
grid-column-end: span 2;

如果你想从网格的右边缘设置它的位置，反之亦然。那么你可能会说：

grid-column-start: span 2;
grid-column-end: -3;

像 Tailwind 这样的实用程序框架不可能知道您想从哪一端定位单元格，因此它涵盖了它的基础并预先定义了 both：

grid-column: span 2 / span 2;

现在，您可以用整数（表示位置）覆盖这些属性中的任何一个，或者您可以将其保留为原样，而 grid-column-end 值将被忽略。

【讨论】：