了解 CSS 网格：网格模板区域
在一个新系列中，Rachel Andrew 详细介绍了 CSS 网格布局规范。这次，我们来看看如何使用grid-template-areas来放置物品。 使用 CSS 网格布局时，您始终可以将项目从一条网格线放置到另一条网格线。然而，还有另一种描述布局的方法，即本质上是视觉的。在本文中，我们将学习如何使用 grid-template-areas 属性来定义网格上的位置，并了解该属性的实际工作原理。 如果您错过了本系列之前的文章，可以在这里找到它们： 第 1 部分：创建网格容器 第 2 部分：网格线 第 3 部分：网格模板区域 用描述布局属性接受一个或多个字符串作为值。每个字符串（用引号引起来）代表网格的一行。您可以在使用和定义的网格上使用该属性，也可以创建布局，在这种情况下，所有行都将自动调整大小。 以下属性和值描述了具有四个区域的网格 - 每个区域跨 电子邮件营销列表 越两个列轨道和两个行轨道。通过在您希望覆盖的所有单元格中重复名称，可以使区域跨越多个轨道："; 复制 通过使用 grid-area 属性以 ident 命名，将项目放置到布局中。因此，如果我想将一个类为 test 的元素放入名为 one 的网格区域，我使用以下 CSS： .test { grid-area: one; } 复制 您可以在下面所示的示例中看到这一点的实际效果。
http://zh-cn.albdirectory.com/wp-content/uploads/2023/12/电子邮件营销列表.jpg
我有四个项目（第一到第四类）；这些使用 grid-area 属性分配给相关网格区域，因此显示在网格上的正确框中。 查看笔简单的网格模板区域示例，作者：Rachel Andrew上。CodePen）在 如果您使用 Firefox 网格检查器，那么您可以看到区域名称和网格线，表明每个项目确实跨越两行和两列轨道 - 所有这些都无需对项目本身进行任何基于行的定位。 由四个项目组成的网格，Firefox 网格检查器会突出显示这些线条 每个项目跨越两行和两列 使用规则grid-template-areas 以这种方式创建布局时有一些规则。
頁:
[1]