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

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

密钥概念：

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

>

>网格跨度：
• ，除非指定，否则网格默认为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：确定隐式网格列计数：> 算法确定隐式网格的列计数：>

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

>

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