CSS Grid 中的“span 1/span 1”是什么意思？

Question

我正在使用 Tailwind 的新 CSS 网格功能。它有Grid Column ，其中span 1/span 1包含 class col-span-1、span 2/ span 2for class等值，col-span-2直到span 12/span 12for class col-span-12。

然而，我无法span 1/ span 1在实践中理解。我能理解1 / span 1。我也能理解，span 1/ 3但似乎无法掌握span 1/ span 1。

Answer 1

您接受的答案并没有真正解释发生了什么。Temani Afif 在评论中说，“span 1 / span 1 简单地等于span 1”。这是真的，但它并没有解释 Tailwind\xe2\x80\x99s 代码的目的，这正是你的问题似乎要问的。

\n

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

\n

grid-column-start: span 2;\ngrid-column-end: span 2;\n

\n

规范的“网格放置冲突处理”部分说：

\n

\n

如果放置包含两个跨度，请删除由结束网格放置属性贡献的一个跨度。

\n

\n

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

\n

grid-column-start: span 2;\n

\n

如果您不指定网格项的起始行，则可以正常工作。但是假设您需要使该项目从第三行\xe2\x80\xa6 开始，您可以设置为grid-column-start，3但现在您已经覆盖了以前的值span 2。你真正想说的是：

\n

grid-column-start: 3;\ngrid-column-end: span 2;\n

\n

如果您想从网格的右边缘设置其位置，则相反。那么你可能会说：

\n

grid-column-start: span 2;\ngrid-column-end: -3;\n

\n

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

\n

grid-column: span 2 / span 2;\n

\n

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

\n

Answer 2

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

\n\n

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

\n\n

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

\n\n

\n\n

注意，col-span-1在1. col-span-1指span 1 / span 1.

\n\n

现在让\xe2\x80\x99s将代码更改为以下内容：

\n\n

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

\n\n

1包含col-span-2哪个是span 2 / span 2. 2它也使其覆盖\xe2\x80\x98s 空间。

\n\n

输出如下所示：

\n\n

\n\n

如果我们col-span-4输入1，它将\xe2\x80\x99 不起作用，因为我们已使用 指定网格位于父级中的第 3div列grid-cols-3。除此之外，span从开始的地方覆盖空间。

\n