CSS Grid 布局是一种强大的网格系统，可以轻松地创建复杂的布局，而不需要太多的代码。但是，有时候我们可能需要在两列之间插入另一列。这在响应式网站设计中非常常见。本文将介绍如何使用 CSS Grid 布局在两列之间插入另一列。
CSS Grid 布局基础
在学习如何在两列之间插入一列之前，我们需要了解 CSS Grid 布局的基础知识。下面是一个基本的 CSS Grid 布局示例：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}这个示例创建了一个由 9 个相等大小的网格单元组成的网格，每个单元格的高度为 100 像素，每个单元之间有 10 像素的间隔。
可以使用 grid-template-columns 和 grid-template-rows 属性指定网格的列数和行数。在上面的示例中，我们使用 repeat(3, 1fr) 来指定我们需要 3 列，每列大小相等，都为 1fr。同样，repeat(3, 100px) 用于指定 3 行，每行高度都为 100 像素。
要在 CSS Grid 中定义间隔，请使用 grid-gap 属性。在上面的示例中，我们将单元格之间的间隔设置为 10 像素。
在两列之间插入一列
在 CSS Grid 中插入一列很容易。我们只需要增加一列，并在 grid-template-columns 属性中指定新的列大小。例如，如果我们想在上面的示例中的第二列和第三列之间插入一列，我们可以这样做：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr) 100px repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}我们添加了一个新的 100px 列，并在 grid-template-columns 属性中将其放置在第二列和第三列之间。现在，我们的网格是由 10 个单元格组成的，第二列和第三列之间有一个额外的列。
下面是一个完整的示例，该示例创建了一个响应式网格布局，其中在较小的屏幕上只有两列，在较大的屏幕上有三列，并且在第二列和第三列之间有一个额外的列。
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- --------- -----
------------------- --------- -------
--------- -----
-
------ ------ --- ----------- ------ -
---------- -
---------------------- --------- ---- ----- --------- -----
-
-在小屏幕上，我们有两列，每列大小相等。在大屏幕上，我们有三列，其中第二列和第三列之间有一个额外的 100px 列。
总结
CSS Grid 布局是一种非常有用的工具，可以轻松地创建复杂的布局。在某些情况下，我们可能需要在两列之间插入一列。这在响应式设计中非常常见。使用 CSS Grid 布局，我们可以轻松地实现此目的。通过添加新的 100px 列，并使用 grid-template-columns 属性将其放置在第二列和第三列之间，我们可以在 CSS Grid 中插入一列。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a93c6048841e98945811a2