CSS3 网格布局(grid layout)基础知识 - 隐式网格自己主动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)...

网格模板（grid-template）属性及其普通写法（longhands）定义了一个固定数量的轨道。构成显式网格。

 

当网格项目定位在这些界限之外。网格容器通过添加隐式网格线生成隐式网格轨道。 

这些隐含的和显式的网格线一起构成隐式网格（implicit grid）。 

隐式网格轨道的尺寸由网格自己主动行（grid-auto-rows）和网格自己主动列（grid-auto-columns）属性来确定。

网格自己主动流（grid-auto-flow）属性用来控制无明白位置的网格项的自己主动定位（auto-placement）， 

一旦显式网格被填满（或者假设没有显式的网格），auto-placement也将导致隐式网格轨道的生成。

自己主动生成行和列的尺寸：grid-auto-rows 和 grid-auto-columns 属性

假设一个网格项被放到一个未明白定义尺寸的行或列中，隐式网格轨道将被创建来容纳它。

 

这在两种情况下会发生：通过显式定位到一个超出范围的行或列中，或是由自己主动定位算法创建额外的行或列。

 

网格自己主动列和网格自己主动行属性用来指定这种隐式创建的轨道的大小。

我们仍然通过实例来学习这个属性的使用方法：

#grid {
    display: grid;
    grid-template-columns: 20px;
    grid-template-rows: 20px }
  #A { grid-column: 1;          grid-row: 1; }
  #B { grid-column: 5;          grid-row: 1 / span 2; }
  #C { grid-column: 1 / span 2; grid-row: 2; }

<div id="grid">
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
</div>

假设一个网格项被放到一个未明白定义尺寸的行或列中，隐式网格轨道将被创建来容纳它。 

这在两种情况下会发生：通过显式定位到一个超出范围的行或列中，或是由自己主动定位算法创建额外的行或列。 

网格自己主动列和网格自己主动行属性用来指定这种隐式创建的轨道的大小。

上面这个样例演示了隐式网格轨道的使用。

本例中共创建了2行5列。当中显式声明的仅仅有第1行/第1列，除此之外有1个隐含行和4个隐含列。

 

网格项B位于网格线5，这将自己主动创建4个隐式网格列，可是因为列3和4中没有不论什么网格项，所以其宽度塌缩为0。

你能够通过 在线实例自己測试下。（请使用Chrome打开）

注意：因为网格布局是制定中的W3规范。所以浏览器尚未全然支持，眼下Chrome已支持。

自己主动布局：网格自己主动流（grid-auto-flow）属性

未明白指定位置的网格项将通过自己主动定位算法来自己主动放置到网格容器的未占用空间中。 

网格自己主动流就是用来控制自己主动布局算法怎样工作的。指定怎样把自己主动布局的网格项放进网格中。

row
自己主动布局算法把网格项按顺序填充到每一行。必要时加入新行。

这是grid-auto-flow的缺省值。

column
自己主动布局算法把网格项按顺序填充到每一列。必要时加入新列。

dense
假设指定了dense，将使用“密集”填充算法。它试图把排在后面的体积小的网格项填充到“大个头”网格留下的空隙中，就像我们在汽车后备箱塞物品一样。

这有可能会导致填充顺序和代码顺序不同。
假设未指定，则将使用“稀疏”填充算法。仅仅是按顺序摆放，不回溯填空。

这能够确保全部网格项保持原有的代码序，但有可能会出现页面空间浪费。

相同的我们通过 在线实例来学习。

当中代码凝视已经讲得非常清楚，这里不再反复。

by iefreer