网格项放置算法

接下来的表格项放置算法将网格项的自动位置解析为确定位置,确保每个网格项具有布局明确的网格区域。(Grid spans 不需要特别的解析;如果它没有明确指定,默认是1)

注意:这个算法可以在显式网格中没有地方自动放置网格项的时候,导致在隐式网格中创建新的行或者列,

每个网格单元(无论是显式还是隐式网格)都可以被occupied 或者 unoccupied。一个被网格项的网格区域(grid area)覆盖的单元是occupied的;否则这个单元是unoccupied。在算法执行期间单元的occupied/unoccupied状态是可以改变的。

为了明晰起见,该算法是在假设grid-auto-flow已指定row的情况下编写的。如果改为将其设置为column,则在此算法中交换对行和列,内联和块等的所有提及。

注意:auto-placement algorithm 工作于网格项 的 order-modified document document order,不是它们出现在元文档中的顺序。

  1. 项网格项描述的那样生成匿名网格项 。(匿名网格项总是自动放置,由于它们的盒子不能指定任何 grid-placement 属性)

  2. 定位任何不能自动定位的元素。(显式指定了grid area,grid area的指定可以通过row columns area等)

  3. 处理指定了row的网格项。

    对于每个指定了行位置(grid-row-start和grid-row-end属性定义明确的网格位置)的网格项,按照 order-modified document order的顺序处理:

    "sparse" 包装模式(默认行为)

    将其放置位置的列起始线设置为最早的(最小的正索引)线索引,以确保该项目的网格区域不会与任何已占用的(occupied)网格单元重叠,并且会超过此步骤之前放置在该行中的所有网格项目。(顺序不能错乱)

    “dense” 包装模式 (dense specified)

    将其放置位置的列起始线设置为最早的(最小的正索引)线索引,以确保该项目的网格区域不会与任何占用(occupied)的网格单元重叠。(顺序可以错乱)

  4. 确定隐式网格中的列。

    在隐式网格中创建列:

    1. 从显式网格中的列开始
    2. 在所有具有确定的列位置的项目(明确定位的项目,在上一步中定位的项目以及尚未定位但具有确定的列的项目)中,根据需要将列添加到隐式网格的开始和结尾以容纳这些项目。
    3. 如果在没有确定的列位置的所有项目中最大的列跨度大于隐式网格的宽度,请在隐式网格的末尾添加列以容纳该列跨度。
  5. 放置剩下的网格项。

    自动放置光标定义了网格中当前插入点,被指定为一对行和列网格线。初始的自动放置光标被设置为隐式网格的行和列。

    grid-auto-flow值用来确定如何定位网格项:

    "sparse"包装模式(默认行为)

    按照orider-modified document order顺序来定义每一个之前步骤没有放置的网格项

    如果如果网格项定义了column位置:

    1. 将光标的列位置设置为网格项目的列起始行。如果该位置小于光标的前一位置的列,则将行位置增加1。
    2. 增加光标的行位置,直到找到一个网格项目不与任何占用的网格单元格重叠的值(根据需要在隐式网格中创建新行)。
    3. 将项目的起始行设置为光标的行位置,并根据其从该位置开始的跨度来设置项目的行结束行。

    如果项目在两个轴上都具有自动网格位置(行和列都没有定义):

    1. 递增自动放置光标的列位置,直到该项目的网格区域不与任何占用的网格单元重叠,或者光标的列位置加上该项目的列跨度,使隐式网格中的列数溢出,如先前在此算法。
    2. 如果在上一步中找到了不重叠的位置,请将项目的行首和列首行设置为光标的位置。否则,增加自动放置光标的行位置(根据需要在隐式网格中创建新行),将其列位置设置为隐式网格中最开始的列,然后返回上一步。

    “dense” 包装模式 (dense specified)

    按照orider-modified document order顺序来定义每一个之前步骤没有放置的网格项

    如果item定义了column位置:

    1. 将光标的行位置设置为隐式网格中的最开始的行。将光标的列位置设置为网格项目的起始列。
    2. 递增自动放置光标的行位置,直到找到一个值,其中网格项目不与任何占用的网格单元重叠(根据需要在隐式网格中创建新行)。
    3. 将项目的起始行索引设置为光标的行位置。 (也可以根据其跨度来隐式设置项目的行尾行。)

    如果项目在两个轴上都具有自动网格位置(行和列都没有定义):

    1. 将光标的行和列位置设置为隐式网格中最开始的行和列。
    2. 递增自动放置光标的列位置,直到该项目的网格区域不与任何占用的网格单元重叠,或者光标的列位置加上该项目的列跨度,使隐式网格中的列数溢出,如先前在此算法。
    3. 如果在上一步中找到了不重叠的位置,请将项目的首行和列首列设置为光标的位置。否则,增加自动放置光标的行位置(根据需要在隐式网格中创建新行),将其列位置重置为隐式网格中的最开始的列,然后返回上一步。

参考

8.5. Grid Item Placement Algorithm

おすすめ

転載: blog.csdn.net/letterTiger/article/details/116198377