CSS grid 网格布局属性详解

1. 为盒子设置网格布局模式

当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。

.box {
	display:grid
}

2. grid-template 可以通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。也可以使用 / 来同时设置行和列的信息，同时支持grid-template-areas 网格命名的方式设置。

.box {
  display: grid;
  grid-template: 150px / auto auto auto;
}

• grid-template-columns 指的默认的列尺寸

设置多少个属性就是设置一行有多少列，每个属性为每一列的宽度，

• grid-template-rows 指的默认的行尺寸

每个属性为每一行的高度，有多少个属性就设置了多少行
可以使用 fr 作为单位，表示网格容器中可用空间的一等份。也可以使用**repeat()**函数来定义,下面两个样式可以等价。

.box{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
}
.box{
	display:grid;
	grid-template-columns: repeat(3,1fr);
}

4. 网格间距 设置每个网格之间的间距

   • grid-column-gap 属性来设置列之间的网格间距
   • grid-row-gap 属性来设置行之间的网格间距
   • grid-gap 属性是 grid-row-gap 和 grid-column-gap 属性的简写，可以同时设置行间距和列间距

5. 网格线 设置网格占据空间的位置，从哪个网络线开始到那个网格线结束，可以看做表格的那种样式，一个单元格代表一个网格，表格的边框线就是网格线。

   grid-column-start和grid-column-end ===> 指定行的网格占据空间
   可用 grid-column:1 / 3合并写法

   grid-row-start 和 grid-row-end ===> 指定行的网格占据空间
   可用grid-row:1 / 3 合并写法

   注意：上面每一对都需要搭配使用，否则没有效果

6. grid-template-areas 网格命名 指定如何显示行和列，使用命名的网格元素

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

指定每个盒子在网格中所占据的行和列的比例位置