CSS网格中自动置换算法的指南

>本教程详细介绍了CSS网格布局模块的自动置换算法，该算法将基于grid-auto-flow属性的元素定位。 以前的文章涵盖了CSS网格基础知识，但该文章专注于算法本身，解释了元素如何最终位置。

密钥概念：

自动置换算法，由
• >管理（默认为grid-auto-flow），位置网格项目。row
>它处理匿名网格项目（直接在网格容器中的未风格文本）。
明确定位的元素（使用
• ）首先放置。grid-area>
具有定义的行位置的元素，但使用稀疏（默认）或密集包装的未定义列位置放置。
• > 算法确定隐式网格的列计数，根据需要扩展，以适应具有特定列位置或大跨度的项目。
>最后，剩余的项目是根据
• >定位的，使用一个自动置换光标，该光标从隐式网格的左上角开始。
• grid-auto-flow了解算法：

在潜水之前，请了解以下核心概念：

匿名网格项目：网格容器中的文本（未包装在标签中）成为匿名网格项目。 它不能直接定型，但继承了父样式。 whitespace不会创建匿名项目。

>

>网格跨度：
• ，除非指定，否则网格默认为1（一个单元格）。 >隐式网格：
，
• 和>定义的网格是显式网格。 隐式网格超出了此功能，以适应位于其边界之外的物品。
以下解释假定
• 。 对于，在说明中交换“行”和“列”。 >grid-template-rows>步骤1：匿名网格项目生成：grid-template-columnsgrid-template-areas> 算法开始于直接从网格容器中的任何文本中创建匿名网格项目。 这些是不可锚定的，但继承了父母的样式。

步骤2：明确放置位置元素：grid-auto-flow: row> 首先放置具有明确定义位置的grid-auto-flow: column元素。该算法使用

>值（启动行，启动列，结束行，结尾列）来确定其位置。

>步骤3：使用设置行放置元素，未设置的列位置：

接下来，放置了带有指定

和grid-row-start的元素（而不是列位置）。 该算法使用稀疏或致密的包装：grid-row-end

• >

  稀疏包装（默认值）：该元素放置在最早的可用列中，而无需重叠现有项目。 它仅考虑在此步骤中仅放置的项目，而不是更早的步骤。>

  >
密集填料（
• ）：元素放在最早的可用列中，即使这意味着将其放在此步骤中的同一行中。

  grid-auto-flow: row dense>（稀疏）

  （密集）

>

步骤4：确定隐式网格列计数：> 算法确定隐式网格的列计数：>

从显式网格的列计数开始。 添加列以适应具有定义列位置的项目。 如果其余项目中最大的列跨度超过了当前的隐式网格宽度。

>

步骤5：放置剩余的项目：

>
1. >自动置换光标（最初在左上角）用于定位剩余的项目。 包装模式（稀疏或致密）会影响放置：
稀疏包装：

光标跨列移动，直到找到非重叠位置为止。如果在当前行中找不到空间，它将移至下一行。

>

密集的填料：光标将每个项目的隐式网格上左上重置，找到最早的可用的非重叠位置。

• >

  （稀疏） （密集）

结论：

• 这款详细的演练阐明了CSS电网自动置换算法。尝试不同的布局以巩固您的理解。 原始文本的FAQ部分已被简短省略，因为核心算法的解释已经非常全面。

以上是CSS网格中自动置换算法的指南的详细内容。更多信息请关注PHP中文网其他相关文章！