网格布局之网格元素放置算法

接下来的网格元素放置算法将网格元素的自动位置解析为确定位置，确保每个网格元素具有布局明确的网格区域。（Grid spans 不需要特别的解析；如果没有明确指定，默认是1）

注意：当显式网格中没有位置放置自动放置的网格元素的时候该算法可以在隐式网格中创建新的行或列。

每个网格单元（无论是在显式还是隐式网格中）都可以是 占用 或者 未占用。一个被网格元素的网格区域覆盖的单元是占用的，否则这个单元是未占用。在算法执行期间单元的占用/未占用状态是可以改变的。

为了明晰起见，该算法是在假设grid-auto-flow已指定row的情况下编写的。如果将其设置为’column’，则需要交换算法中提到的row为column，内联和块等。

注意：自动放置算法工作于网格元素的order-modified document顺序，不是它们出现在元文档中的顺序。

1. 为网格容器内没有元素包裹的连续的非空白字符文字生成匿名网格元素 。（因为匿名网格元素不能指定任何 grid-placement 属性，所以它们总是自动放置的）

2. 放置所有不能自动定位的元素。【元素显式指定了grid area则不能自动定位。grid area的指定可以通过grid-row grid-columns和grid-area】

3. 处理指定了行的元素。

   对于每个指定了行位置的网格元素（grid-row-start和grid-row-end属性定义了明确的网格位置），按照order-modified document的顺序做如下处理：

   “稀疏“ 模式(默认行为，值是sparse)

   放置位置的列起始线为最早的（最小的正索引）线索引，同时要确保该元素的网格区域不会与任何已占用的网格单元重叠，并且元素的列起始线需要超过之前通过当前步骤放置在当前行中的任何网格元素的列起始线。

   “紧凑” 模式 (值是dense)

   放置位置的列起始线为最早的（最小的正索引）线索引，同时要确保该元素的网格区域不会与任何已占用的网格单元重叠。

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

   在隐式网格中创建列：

   1. 从显式网格中的列开始
   2. 在所有具有确定的列位置的元素（明确定位的元素，在上一步中定位的元素以及尚未定位但具有确定列的元素）中，根据需要将列添加到隐式网格的开始和结尾以容纳这些元素。
   3. 如果在没有确定的列位置的所有元素中最大的列跨度大于隐式网格的宽度，在隐式网格的末尾添加列以容纳该元素。

   例如，在下面的样式片段中:
   #grid {
   display: grid;
   grid-template-columns: repeat(5, 100px);
   grid-auto-flow: row;
   }
   #grid-item {
   grid-column: 4 / span 3;
   }
   需要6列。显式网格线从1到6共有5列（来自grid-template-columns），但是#grid-item列的位置意味结束的线是第7根，需要在隐式网格后面添加额外的列。

5. 放置剩下的网格元素。

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

   grid-auto-flow值用来确定如何定位网格元素：

   “稀疏“ 模式(默认行为，值是sparse)

   每个之前步骤没有放置的网格元素，按照order-modified document顺序：

   如果元素定义了column位置：

   1. 将光标的列设置为网格元素的起始列。如果该值小于光标之前列的值，则将光标行位置加1。
   2. 增加光标的行，直到找到一个值让网格元素不与任何已占用的网格单元重叠（根据需要在隐式网格中创建新行）。
   3. 将元素的起始行设置为光标的行，并根据元素从当前位置的跨度设置元素的结束行。

   如果元素在两个轴上都具有自动网格位置：

   1. 递增自动放置光标的列位置，直到该元素的网格区域不与任何已占用的网格单元重叠，或者光标的列位置加上该元素的列跨度超出了之前在此算法中确定的隐式网格的列。
   2. 如果在上一步中找到了不重叠的位置，将元素的行首和列首行设置为光标的行和列。否则，增加自动放置光标的行（根据需要在隐式网格中创建新行），将其列设置为隐式网格中起始列，然后返回上一步。

   “紧凑” 模式 (值是dense)

   每个之前步骤没有放置的网格元素，按照order-modified document顺序：

   如果元素定义了column位置：

   1. 将光标的行设置为隐式网格中的起始行。将光标的列设置为网格元素的起始列。
   2. 增加自动放置光标的行，直到找到一个值让网格元素不与任何已占用的网格单元格重叠（根据需要在隐式网格中创建新行）。
   3. 将元素的起始行索引设置为光标的行。（也可以根据其跨度来隐式设置元素的行尾。）

   如果元素在两个轴上都具有自动网格位置：

   1. 将光标的行和列位置设置为隐式网格中的起始行和列。
   2. 增加自动放置光标的列位置，直到该元素的网格区域不与任何占用的网格单元重叠，或者光标的列位置加上该元素的列跨度超出了之前在此算法中确定的隐式网格的列。
   3. 如果在上一步中找到了不重叠的位置，将元素的行首和列首行设置为光标的行和列。否则，增加自动放置光标的行（根据需要在隐式网格中创建新行），将列重置为隐式网格中的起始列，然后返回上一步。

order-modified document顺序：弹性盒子按照order数字越小越早放置内部元素。初始情况下元素的order值都相同就按照元素在源码中出现顺序顺序放置元素。【order默认值是0】

什么是隐式网格？

为什么要在算法第二步确定隐式网格宽度？

翻译的语句不通顺需要再整理整理

将一些术语的原文补充上

文中的返回上一步是什么意思？

一些名词的解释要加上出处

能配合一些图片描述算法步骤最好了

参考

8.5. Grid Item Placement Algorithm