CSS3 网格布局(grid layout)基础知识

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

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

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

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

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

有道智云AI开放平台

有道智云AI开放平台

下载

立即学习“前端免费学习笔记（深入）”；

一旦显式网格被填满（或者如果没有显式的网格），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; }

  
A
  
B
  
C

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

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

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

网格项B位于网格线5，这将自动创建4个隐式网格列，但是由于列3和4中没有任何网格项，所以其宽度塌缩为0。

你可以通过 在线实例自己测试下。（请使用Chrome打开）

注意：由于网格布局是制定中的W3规范，所以浏览器尚未完全支持，目前Chrome已支持。

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

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

网格自动流就是用来控制自动布局算法如何工作的，指定如何把自动布局的网格项放进网格中。

row
自动布局算法把网格项按顺序填充到每一行，必要时添加新行。这是grid-auto-flow的缺省值。
column
自动布局算法把网格项按顺序填充到每一列，必要时添加新列。
dense
如果指定了dense，将使用“密集”填充算法，它试图把排在后面的体积小的网格项填充到“大个头”网格留下的空隙中，就像我们在汽车后备箱塞物品一样。这有可能会导致填充顺序和代码顺序不同。
如果未指定，则将使用“稀疏”填充算法，只是按顺序摆放，不回溯填空。这可以确保所有网格项保持原有的代码序，但有可能会出现页面空间浪费。

同样的我们通过 在线实例来学习。其中代码注释已经讲得很清楚，这里不再重复。

by iefreer