一、概述

网格布局（grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

二、基本属性

2.1项目和容器

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

上述代码最外层div为容器，内部三个div为项目
注意：Grid 布局只对项目生效,对里面项目里子元素不起作用

2.2行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

grid的行和列

上图垂直深色区域是列，水平深色是行。

2.3单元格

单元格

上图所示的颜色方块为单元格

2.4网格线

如单元格图所示，每个单元格的间隔就是网格线（包括单元格于边框的间隔）

三、容器属性

定义在容器上面，称为容器属性；

3.1display 属性

display: grid指定一个容器采用网格布局。

div {
  display: grid;
}

3.2grid-template-columns 属性和grid-template-rows 属性

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

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

上述代码定义了一个容器为网格布局，并且设置为三行三列，列宽和行高都是300px。

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

除了使用绝对单位，也可以使用百分比。

3.2.1 repeat()参数

repeat()的作用主要是减少代码量，重复写同样的值比较麻烦。

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

上述代码为百分比的简写模式

grid-template-columns: repeat(2, 100px 50px 100px);

上述代码定义了6列，分别按100px，50px，100px的顺序排列

image.png

3.2.2auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

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

上述代码表示每列宽度100px，然后自动填充，直到容器不能放置更多的列

auto-fill 关键字

3.2.3 fr 关键字

如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

  grid-template-columns: 1fr 2fr;

上述代码定义了第一列的宽度是第二列宽度的一半。

fr关键字

fr还可以与绝对单位配合使用

 grid-template-columns: 100px 1fr 2fr;

上述代码定义了第一列的固定宽度为100px,第二列的宽度是第三列宽度的一半。

image.png

3.2.4 minmax()

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

grid-template-columns: 1fr 2fr minmax(100px, 1fr);

上述代码定义了三列，第一列的宽度是第二列的一半，第三列的宽度为100px到1fr之间。

minmax()

3.2.5 auto 关键字

auto 为自动，表示由浏览器决定宽度

 grid-template-columns: 100px auto 200px;

上述代码定义第一列和第三列的宽度分别为100px和200px，而第二列的宽度，基本上等于该列单元格的最大宽度。

auto关键字

3.3网格线

3.3.1grid-row-gap 属性，grid-column-gap 属性

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

 grid-row-gap: 20px;
 grid-column-gap: 20px;

上述代码定义了行间距和列间距的宽度都为20px。

网格线

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式

grid-gap: 20px;

代码效果等同于上一段css代码。

3.4 grid-auto-flow 属性

grid-auto-flow 属性定义了项目的排列顺序。

grid-auto-flow: column

上述代码定义了项目按照列的方式排列。

column

grid-auto-flow: row

上述代码定义了项目按照行的方式排列。

row

3.5justify-items 属性，align-items 属性，place-items 属性

justify-items属性设置单元格内容的水平位置（左中右）。align-items属性设置单元格内容的垂直位置（上中下）。

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

这两个属性的写法完全相同，都可以取下面这些值。

image.png

place-content属性是align-content属性和justify-content属性的合并简写形式。举例如下：

place-items:start end;

如果省略第二个值，则浏览器认为与第一个值相等。

3.6justify-content ，属性align-content 属性，place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右）。align-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 - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
*/

3.7 grid-auto-columns 属性，grid-auto-rows 属性

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

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

.item8 {
    background-color: rgba(0, 255, 13, 0.445);
    border-radius: 15px;
    grid-row-start: 4;
    grid-column-start: 2;
}

.item9 {
    background-color: rgba(253, 5, 5, 0.514);
    border-radius: 15px;
    grid-row-start: 5;
    grid-column-start: 3;
}

image.png

四、项目属性

下面这些属性定义在项目上面。

4.1grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性

image.png

.item1 {
    background-color: pink;
    border-radius: 15px;
    grid-column-start: 2;
    grid-column-end: 4;
}

上述代码定义1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。

image.png

.item1 {
    background-color: pink;
    border-radius: 15px;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
}

上图代码指定了1号项目四个边框的位置

image.png

4.2 grid-column 属性，grid-row 属性

grid-column属性是grid-column-start和grid-column-end的合并简写形式。grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

.item1 {
    background-color: pink;
    border-radius: 15px;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
}
/*上述代码等同于下面代码*/
.item1 {
    background-color: pink;
    border-radius: 15px;
    grid-column:1/3;
    grid-row: 2/4;
}

grid-column 属性，grid-row 属性可用作与单元格合并

4.3justify-self 属性，align-self 属性，place-self 属性

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

.item-1  {
  justify-self: start;
}

上述代码定义了项目1对齐单元格的边缘

image.png