CSS Grid 布局

关于 Grid

CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个 二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其子元素（成为 Grid Items 网格项），你就可以轻松使用 Grid(网格) 布局。

Grid 布局 比 Flex 布局， 从一维到二维。

相关术语

1. 网格容器(Grid Container): 应用 display: grid 的元素.
2. 网格项(Grid Item): 网格容器（Grid Container）的子元素（直接子元素）.
3. 网格线(Grid Line): 构成网格结构的分界线。它们既可以是垂直的（“列网格线(column grid lines)”），也可以是水平的（“行网格线(row grid lines)”），并位于行或列的任一侧。
4. 网格轨道(Grid Track): 两条相邻网格线之间的空间。你可以把它们想象成网格的列或行。
5. 网格单元格(Grid Cell): 两个相邻的行和两个相邻的列网格线之间的空间.
6. 网格区域(Grid Area): 4条网格线包围的总空间。一个网格区域(Grid Area)可以由任意数量的网格单元格(Grid Cell) 组成。

主要属性

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

容器属性

display 属性

• display: grid 指定一个容器采用块级网格布局。
• display: inline-grid 指定一个容器采用内联网格布局。

grid-template-columns,grid-template-rows 属性

• grid-template-columns: 属性定义每一列的列宽
• grid-template-rows: 属性定义每一行的行高

/*定义了两行三列的网格，行高为200px 100px， 列宽都为100px*/

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 200px 100px;
}

/* 除了长度值，也可以使用百分比，或者等份网格容器中可用空间（使用 fr 单位）*/
.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

如果定义了多个值，可以采用 repeat() 函数

repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

grid-template-rows: repeat(3, 33.33%);
grid-template-columns: repeat(2, 100px 20px 80px);

auto-fill 关键字, 单元格的大小是固定的，但是容器的大小不确定, 可以用 auto-fill 关键字表示自动填充。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

fr（fraction 的缩写，意为”片段”） 关键字，等分网格容器剩余可用空间来设置 网格轨道(Grid Track) 的大小。

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

minmax() 关键字, 产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

/*minmax(100px, 1fr)表示列宽不小于100px，不大于1fr*/
grid-template-columns: 1fr 1fr minmax(100px, 1fr);

grid-template-areas 属性

网格布局允许指定”区域”（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。常用布局示例.

<div class="container">
  <div class="item-a"></div>
  <div class="item-b"></div>
  <div class="item-c"></div>
  <div class="item-d"></div>
</div>

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: "header header header header"
                     "main main . sidebar"
                     "footer footer footer footer";
}

grid-row-gap,grid-column-gap,grid-gap 属性

• grid-row-gap 属性设置行与行的间隔（行间距）
• grid-column-gap 属性设置列与列的间隔（列间距）
• grid-gap 属性是 grid-column-gap 和 grid-row-gap的合并简写形式。如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。

上述属性将可以删除 grid- 前缀

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

/*简写*/
.container {
  grid-gap: 20px 20px;
}

justify-items,align-items,place-items 属性

• justify-items 属性设置 单元格内容 的水平位置（左中右）
• align-items 属性设置 单元格内容 的垂直位置（上中下）
• place-items 属性是 align-items 属性和 justify-items 属性的合并简写形式。

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

justify-content,align-content,place-content 属性

• justify-content 属性是整个 内容区域 在容器里面的水平位置（左中右）
• align-content 属性是整个 内容区域 的垂直位置（上中下）
• place-content 属性是align-content属性和justify-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;  
}

grid-auto-columns,grid-auto-rows 属性

grid-auto-columns 属性和 grid-auto-rows 属性用来设置，浏览器自动创建的多余网格的列宽和行高.

grid-auto-flow 属性

grid-auto-flow: row; /*先行后列*/
grid-auto-flow: column; /*先列后行*/

grid-auto-flow: row dense; /*先行后列，并且尽可能紧密填满，尽量不出现空格。*/
grid-auto-flow: column dense; /*先列后行，并且尽可能紧密填满，尽量不出现空格。*/

项目属性

grid-column-start,grid-column-end,grid-row-start,grid-row-end 属性

锁定项目位置

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

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

/*
这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
1号项目的左边框距离右边框跨越2个网格。
*/
.item-1 {
  grid-column-start: span 2;
}

grid-column,grid-row,grid-area 属性

• grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式
• grid-row 属性是 grid-row-start 属性和 grid-row-end 的合并简写形式。
• grid-area 属性指定项目放在哪一个区域, 还可用作 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的合并简写形式，直接指定项目的位置。

/*用 / 分开 */
.item {
  grid-column: 1 / 3;
  grid-row:  / ;
}

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

justify-self,align-self,place-self 属性

• justify-self 属性设置 单元格内容 的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目。
• align-self 属性设置 单元格内容 的垂直位置（上中下），跟 align-items 属性的用法完全一致，也是只作用于单个项目。
• place-self 属性是 align-self 属性和 justify-self 属性的合并简写形式。

CSS3 兼容各种浏览器的前缀

1. -webkit-　chrome、safari
2. -moz- firefox
3. -ms- IE
4. -o- opera

相关参考

• 阮一峰-CSS Grid 网格布局教程
• CSS Grid 布局完全指南