了解 CSS 网格：网格线
在一个新系列中， 详细分析了 CSS 网格布局规范。这次，我们来看看如何使用网格线来放置项目。 在本系列的第一篇文章中，我了解了如何创建网格容器以及应用于父级的各种属性构成网格的元素。一旦有了网格，你就拥有了一组网格线。在本文中，您将了解如何通过向网格容器的直接子级添加属性来将项目放置在这些行上。 我们将涵盖： 展示位置属性及其简写 和 。 如何使用-按行号放置。 如何根据线路名称放置项目。 放置项目时隐式网格和显式网格之间的差异。 使用span关键字，还有一点好处。混合自动放置和放置的物品时要注意什么。 第 1 部分：创建网格容器 第 2 部分：网格线 第 3 部分：网格模板区域 基于线的定位的基本概念 要将项目放置在网格上，我们设置它开始的行，然后设置我们希望 电子邮件营销列表 它结束的行。因此，对于五列五行的网格，如果我希望我的项目跨越第二和第三列轨道，以及第一、第二和第三行轨道，我将使用以下 。请记住，我们的目标是线路，而不是赛道本身。复制 这也可以指定为简写，正斜杠之前的值是起始行，m之后的值是结束行。复制 在 上，您可以查看示例，并更改项目跨越的行。
http://zh-cn.albdirectory.com/wp-content/uploads/2023/12/电子邮件营销列表.jpg
查看笔网格线：放置速记作者：在 上。 请注意，我们的框背景拉伸到整个区域的原因是因为对齐属性 align-self 和的初始值是拉伸的。一个> 如果您只需要项目跨越一个轨道，则可以省略结束行，因为默认行为是项目跨越一个轨道。当我们像上一篇文章一样自动放置项目时，我们会看到这一点，每个项目都会进入一个单元格 - 跨越一列和单行轨道。因此，要使某个项目从第 2 行跨越到第 3 行，您可以编写： 复制 错过最后一行也是完全正确的：复制 简写 您还可以使用grid-area放置项目。我们将在以后的文章中再次遇到此属性，但是，当与行号一起使用时，它可以用于设置所有四行。 复制 这些行号的顺序为。
頁:
[1]