在前端开发中，CSS Grid 是一个强大的布局工具，它可以用于创建复杂的网格布局。但是，当我们需要在多个页面中使用相同的网格布局时，为每个页面单独编写 CSS 代码可能会非常繁琐。因此，我们可以将网格布局代码保存在一个外部文件中，并在需要使用布局的页面上引入该文件。
什么是外部布局文件？
外部布局文件是一个包含网格布局代码的 CSS 文件。它与其他 CSS 文件一样，可以在 HTML 页面中通过链接标签引入。外部布局文件的好处是可以在多个页面中重复使用相同的布局代码，从而减少重复的工作量。
如何创建外部布局文件？
创建外部布局文件的过程与创建普通的 CSS 文件类似。我们可以在一个新的 CSS 文件中编写网格布局代码，并将其保存为一个单独的文件，例如 grid-layout.css。在该文件中，我们可以定义网格容器、网格项以及网格线等元素，以及它们之间的关系和属性。
以下是一个简单的外部布局文件示例：
// javascriptcn.com 代码示例
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}
.item {
background-color: #ccc;
padding: 10px;
text-align: center;
}在这个示例中，我们定义了一个名为 container 的网格容器，它包含了 3 行和 3 列的网格项，每个网格项之间有 10 像素的间隔。我们还定义了一个名为 item 的网格项，其背景颜色为灰色，内边距为 10 像素，并且居中对齐。
如何在 HTML 页面中引入外部布局文件？
要在 HTML 页面中使用外部布局文件，我们需要使用链接标签将其引入。链接标签的 rel 属性应设置为 stylesheet，type 属性应设置为 text/css，href 属性则应指向我们创建的外部布局文件的路径。
以下是一个示例 HTML 页面，其中引入了上面定义的 grid-layout.css 文件：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="grid-layout.css">
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>在这个示例中，我们将 grid-layout.css 文件链接到了 HTML 页面中，并将其应用于一个包含 9 个网格项的网格容器。
如何在外部布局文件中定义样式？
在外部布局文件中，我们可以像在普通的 CSS 文件中一样定义样式。我们可以使用类、ID 或元素选择器来选择要应用样式的元素，并为它们设置属性和值。
在网格布局中，我们可以使用 grid-template-columns、grid-template-rows、grid-gap 等属性来定义网格容器的布局。我们还可以使用 grid-column 和 grid-row 等属性来控制网格项在网格容器中的位置。
以下是一个示例外部布局文件，其中定义了一个包含两个网格项的网格容器：
// javascriptcn.com 代码示例
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 10px;
}
.item-1 {
background-color: #f00;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.item-2 {
background-color: #0f0;
grid-column: 2 / 3;
grid-row: 2 / 3;
}在这个示例中，我们定义了一个名为 container 的网格容器，它包含了 2 行和 2 列的网格项，每个网格项之间有 10 像素的间隔。我们还定义了两个网格项，分别为 item-1 和 item-2，并指定它们在网格容器中的位置和背景颜色。
总结
CSS Grid 是一个强大的布局工具，可以用于创建复杂的网格布局。当我们需要在多个页面中使用相同的网格布局时，可以将网格布局代码保存在一个外部文件中，并在需要使用布局的页面上引入该文件。外部布局文件可以减少重复的工作量，并使代码更易于维护和更新。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655083ab7d4982a6eb954a61