携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情
前言
不同于弹性盒子只能把内容在一个方向上排列布局，网格是一个二维的布局系统，可以将内容按照行与列的格式进行排版布局，能够应用于更加复杂的布局。
网格
什么是网格布局
在网站的设计中似乎都是趋于网格化，例如常见的头部-侧边栏、内容区域-尾部设计。网格布局便是为了顺应这种趋势而出现的，在网格中可以通过一系列水平与垂直的线去设计放置元素。
创建一个网格
首先，我们先定义一个常用的网页，再通过网格去布局。
<style>
body {
margin: 0;
padding: 0;
}
.container {
}
.header,
.footer {
border-radius: 5px;
padding: 10px;
border: 2px solid blue;
}
.sidebar {
border-right: 1px solid #999;
}
.content {
}
</style>
<div class="container">
<div class="header">This is a grid</div>
<div class="sidebar">
<h1>This is a sidebar.</h1>
<p>This is a sidebar.We can put some things in it.</p>
</div>
<div class="content">
<h1>This is a contentbox.</h1>
<p>This is a contentbox.We can put some things in it.</p>
</div>
<div class="footer">This is footer.</div>
</div>
效果：
定义网格
添加以下css代码
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-gap: 20px;
}
.header {
grid-column: 1/3;
grid-row: 1;
}
.sidebar {
grid-column: 1/2;
grid-row: 2;
}
.content {
grid-column: 2;
grid-row: 2;
}
.footer {
grid-column: 1/3;
grid-row: 3;
}
效果：
这里添加了display:grid的直接父元素称为网格容器（Grid Container） ，而它的直接子元素都称为网格项（Grid Item） （直接子元素是第一级的子元素，第二、三级的就不能算是）
还有就是网格线（Grid Line） 为构成网格结构的分界线，可以是列网格线、行网格线。例如下图1、2、3、4就为列网格线。网格单元格（Grid Cell） 为两条相邻行网格线与两条相邻列网格线之间的空间，例如下图的1单元格就为1-2行网格线和1-2行列网格线之间的网格。网格轨道（Grid Track） 为两条相邻网格线之间的空间，如途中的1、2、3单元格就为1-2列网格线之间的网格轨道。
网格属性
网格容器添加完display:grid属性后需要给我们的网格加些列或行。
定义列/行
grid-template-columns/grid-template-rows
- 描述：分别定义列和行，它们表示使用空格分隔的值列表，用来定义网格的列和行。这些值表示网格轨道(Grid Track) 大小，它们之间的空格表示网格线。
- 语法：
<track-size>可为长度值、百分比或单位1fr表示所定义方向上的一个单元格，有重复时可通过函数repeat(,)例如repeat(3,1fr)<line-name>：你可以选择的任意线名称 - 示例：
grid-template-columns：1fr 3fr就表示列方向的1个单元格、3个单元格
grid-column-gap / grid-row-gap
- 描述：指定网格线(grid lines)的大小。你可以把它想象为设置列/行之间间距的宽度。例如上上图1、2、3、4列对应的长度即为
grid-column-gap - 语法：
<line-size>：长度值 - 示例：
grid-column-gap:20px - 以上两个属性可缩写为
grid-gap
定义元素位置
grid-columns/grid-rows
- 描述：用于指定网格项的大小和位置
- 语法：
<grid-line>/<grid-line> - 示例：
grid-columns:1/3即表示上上图的列1-3之间的单元格，再指定grid-rows即可确定元素的位置
grid-template-areas
-
描述：命名一些元素并在属性中使用这些名字作为一个区域。通过引用
grid-area属性指定的 网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表一个空单元格。这个语法本身可视作网格的可视化结构。 -
使用规则如下：
- 你需要填满网格的每个格子
- 对于某个横跨多个格子的元素，重复写上那个元素
grid-area属性定义的区域名字 - 所有名字只能出现在一个连续的区域，不能在不同的位置出现
- 一个连续的区域必须是一个矩形
- 使用
.符号，让一个格子留空
-
示例： 现在区域比如说分配的是
grid-template-columns：1fr 3fr，再配置网格区域grid-template-areas:"header header" "sidebar content" "footer footer"已经定义了grid-template-area接下来就是将元素往上放，按模板名称放就是。例如.header{grid-area:header}.side{grid-area:sidebar }.content{grid-area:content}.footer{grid-area:footer}
