什么是网格布局？

网格是由一系列水平及垂直的线构成的以一种布局模式。根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。

一个网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。
grid.png

容器属性

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。这部分先介绍容器属性。

display

display: grid;
display: inline-grid;

grid-template-columns 和 grid-template-rows

grid-template-columns 定义每一列的列宽
grid-template-rows 定义每一行的行高

  • repeat() 重复网格
  • auto-fill 自动填充
  • fr 比例关系
  • minmax 最大最小值
  • [] 指定网格线名称

grid-row-gap ，grid-column-gap ，grid-gap

grid-row-gap 行与行的间隔（行间距）
grid-column-gap列与列的间隔（列间距）
grid-gap 统称

grid-auto-flow 排序

  • row 先行后列
  • column 先列后行
  • row dense 先行后列 尽量不出现空格
  • column dense 先列后行 尽量不出现空格

justify-items ，align-items ，place-items（统称）

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。
  • stretch：拉伸，占满单元格的整个宽度（默认值）。

justify-content ，align-content ，place-content

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
  • start - 对齐容器的起始边框。
  • end - 对齐容器的结束边框。
  • center - 容器内部居中。
  • stretch - 项目大小没有指定时，拉伸占据整个网格容器。
  • space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
  • space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
  • space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

grid-auto-columns ，grid-auto-rows

自动动创建的多余网格的列宽和行高

grid-template ，grid

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

项目属性

grid-column-start ，grid-column-end ，grid-row-start ，grid-row-end

  • grid-column-start属性：左边框所在的垂直网格线
  • grid-column-end属性：右边框所在的垂直网格线
  • grid-row-start属性：上边框所在的水平网格线
  • grid-row-end属性：下边框所在的水平网格线

span 表示 跨越

justify-self ，align-self ，place-self（统称）

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。
  • stretch：拉伸，占满单元格的整个宽度（默认值）。