前言：
网格布局是一种常见的页面布局方式，它将页面分成多个网格，每个网格可以放置不同的内容或元素。网格布局的优点包括易于设计、易于维护、良好的可读性和可访问性等。
网格布局 vs 弹性布局
- 从字面意思也很好理解，网格布局的本身是将页面划分为两个维度，分别是行和列，而学过弹性布局的同学都知道，弹性布局更多的关注单一的维度，所以我们可以简单的理解，
弹性布局（flex）是一维布局，而网格布局（gird）是二维布局。所以也就注定了网格布局的应用比弹性布局更加的广泛和强大。 - 网格布局和弹性布局有很多相似的地方，比如在网格布局和弹性布局中都可以简单的分为两大类。分别是
容器属性和项目属性，如果还没有看过弹性布局的同学建议先去看下弹性布局，这对于更好的理解网格布局很有好处。
容器属性
（一）display 属性
display:grid用于创建一个块级元素的网格容器dipaly:inline-grid用于创建一个内联元素的网格容器
（二）grid-template-columns 属性 & grid-template-rows 属性
它们的作用分别是设置容器的列宽和行高，比如设置一个容器的中的项目行高和列宽分别是 40px 60px 80px，代码如下：
less
ul {
display: grid;
grid-template-columns: 40px 60px 80px; // 列宽
grid-template-rows: 40px 60px 80px; // 行高
} 效果如下：（这里省略了项目的样式代码）
接下来介绍几个常见的函数和关键字：
repeat() 函数： 用于简化重复的值，该函数接收两个参数，分别是重复的次数以及重复的值。
比如当项目的排列的高度都是一样的，但是我们又不想写重复的代码，这个时候就可以这样下了：
less
ul {
display: grid;
grid-template-columns: 50px 100px 150px;
// grid-template-rows: 50px 50px 50px; // 下面是简写
grid-template-rows: repeat(3, 50px);
}效果如下：
auto-fill 关键字： 表示自动填充，当我们想要当前容器的行或者列中尽可能多的排列项目，排列不下的项目自动换行，这个时候就可以使用auto-fill。
代码如下：
less
ul {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}效果如下：
（三）row-gap 属性、column-gap 属性以及 gap 属性
row-gap表示行间距，column-gap表示列间距，grid-gap表示行列间距的缩写。比如我们需要设置一个行间距是10px 列间距是20px的网格布局，代码如下：
less
display: grid;
grid-template-columns: 200px 200px 200px;
row-gap: 10px;
column-gap: 20px;
// 也可以如下缩写
// gap: 10px 20px;效果如下：
（四）grid-template-areas 属性以及 grid-areas属性
grid-template-areas 属性在 CSS Grid 布局中用于定义网格区域。这个属性允许您为网格容器中的单元格定义特定的区域，并为这些区域命名。通过这些区域名称，您可以在网格项中使用 grid-area 属性来放置内容。
使用 grid-template-areas 属性，您可以以更直观和组织化的方式来管理网格中的内容。您可以定义任意数量的区域，并根据需要为每个区域命名。每个区域可以由单个或多个单元格组成。
vue中模版代码如下：
html
<ul>
<li
v-for="item in example"
:class="item.class"
/>
</ul>css代码如下：
less
ul{
display: grid;
grid-template-columns: 40px 200px 1fr;
grid-template-rows: 50px 100px 50px;
gap: 10px;
grid-template-areas: 'header header header' 'sidebar main main' 'footer footer footer';
.header {
grid-area: header;
background-color: red;
}
.sidebar {
grid-area: sidebar;
background-color: blue;
}
.main {
grid-area: main;
background-color: yellow;
}
.footer {
grid-area: footer;
background-color: black;
}
}效果如下：
（五）grid-auto-flow 属性
grid-auto-flow 属性用于控制容器中的项目的流动方向，常见的属性值如下：
- row：这是默认值，表示网格子项将按照行的顺序进行放置，先填满第一行，然后继续到下一行。
- column：表示网格子项将按照列的顺序进行放置，先填满第一列，然后继续到下一列。
- row dense ：这个值类似于
row，但它会尝试"紧密填充"网格中的空白空间。这意味着如果某行中有足够的空间放置更大的网格子项，它会被放置在那里，而不是留空。 - column dense ：这个值类似于
column，但它也会尝试"紧密填充"网格中的空白空间。
代码如下：
less
// 父容器
display: grid;
grid-template-columns: 200px 200px 200px;
grid-auto-rows: 50px;
gap: 10px;
grid-auto-flow: row;
// six子项目
grid-column-start: span 2;效果如下：
如上的效果，你会发现five和six之间有一块空白的空间没有被填充，这是由于six大于空白处的长度，如果想让它自动填充空白的空间，可以设置grid-auto-flow: row dense';这个时候就会自动填充剩余空间，效果如下：
（六） justify-items 属性、align-items 属性以及 place-items 属性
justify-items 属性用于控制容器中项目水平方向的对齐方式， align-items属性用于控制容器中项目垂直方向的对齐方式，place-items是以上两个属性的缩写。它们的属性值如下：
start：网格项垂直居中对齐，水平左对齐。center：网格项垂直居中对齐，水平居中对齐。end：网格项垂直居中对齐，水平右对齐。stretch：网格项垂直拉伸以填满整个网格容器，水平居中对齐（默认值）。baseline：网格项按基线对齐。
如设置网格中的项目水平方向左对齐，可以这样设置，代码如下：
less
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-auto-rows: 50px;
gap: 10px;
justify-items: start;效果如下：
如设置网格中的项目水平方向居中对齐，可以这样设置，代码如下：
less
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-auto-rows: 50px;
gap: 10px;
justify-items: center;效果如下：
如设置网格中的项目水平方向左对齐，垂直方向居中对齐，可以这样设置，代码如下：
less
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-auto-rows: 50px;
gap: 10px;
place-items: center start;效果如下：
（七）justify-content 属性、align-content 属性以及 place-content 属性
justify-content 是 CSS Grid 布局中的一个属性，用于控制网格容器中网格项的水平对齐方式。这个属性定义了网格项在网格容器的主轴（默认为水平方向）上的对齐方式。align-content属性用于控制垂直方向的对齐方式，place-content 是他们的缩写，他们的属性值都是一样的，下面是以justify-content为例演示属性值的区别。
justify-content 可以接受以下值：
-
flex-start：网格项左对齐（默认值）。
-
flex-end：网格项右对齐。
-
center：网格项居中对齐。
-
space-between：网格项平均分布在行或列上，第一个网格项与容器的起始边对齐，最后一个网格项与容器的结束边对齐。
-
space-around：每个网格项两侧的间隔相等，网格项平均分布在行或列上。
-
space-evenly：网格项之间的间隔相等，网格项平均分布在行或列上。
（七） grid-auto-columns 属性和 grid-auto-rows 属性
grid-auto-columns 属性在 CSS Grid 布局中用于控制自动创建的列的宽度。当网格容器的列数不是显式指定时，grid-auto-columns 属性允许您自动添加足够的列来放置网格项。
grid-auto-columns 可以接受以下几种类型的值：
- 固定宽度 ：您可以使用具体的长度值（如
200px或10em）来指定每列的宽度。 - 最大宽度 ：使用
max-content值可以使列宽等于其网格项的最大宽度。 - 最小宽度 ：使用
min-content值可以使列宽等于其网格项的最小宽度。 - 自动计算宽度 ：如果您不设置
grid-auto-columns属性，或者将其设置为auto，浏览器将根据网格项的内容自动计算列宽。
如果您不指定 grid-auto-columns 属性，或者将其设置为 auto，浏览器将根据网格项的内容自动计算列宽。这意味着每列的宽度将根据其网格项的实际内容来调整。
grid-auto-rows 属性是用于控制自动创建的列的高度，如下当我们只设置了第一列的高度，项目中的其他列高度，可以使用 grid-auto-rows 来指定。
代码如下：
less
display: grid;
grid-template-columns: 200px 200px 200px;
gap: 10px;
grid-template-rows: 100px;
grid-auto-rows: 50px;效果如下：
项目属性
（一）grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性
grid-column-start 是一个 CSS 属性，用于控制网格项在网格容器内的列网格线的起始位置。这个属性定义了网格项目的左边缘的开始。
grid-column-start 可以使用多种方式指定：
- 使用特定的网格线：通过指定一个网格线，可以确定网格项在网格内的位置。
- 使用 span 关键字：可以指定跨越多少个网格。
- 使用 auto 关键词：表明自动定位，自动跨度或者默认跨度为1。
此外，还可以使用 grid-column-end 属性来设置网格项的结束位置。这两个属性一起用于确定网格项在整个网格中的位置。
grid-column-end 属性、grid-row-start 属性以及 grid-row-end 属性用法与上面雷同。
例如：设置，网格中的第一个项目，从网格线的2位置开始，4位置结束，就可以如下，代码设置。
less
div{
display: grid;
grid-template-columns: 200px 200px 200px;
gap: 10px;
grid-auto-rows: 50px;
.one {
grid-column-start: 2;
grid-column-end: 4;
}
}效果如下：
（二）justify-self 属性、align-self 属性以及 place-self 属性
justify-self 属性在 CSS Grid 布局中用于控制单个网格项的水平对齐方式。这个属性允许您覆盖网格容器的 justify-content 属性，以针对单个网格项进行更精确的对齐控制。
justify-self 可以接受以下值：
start：网格项左对齐。end：网格项右对齐。center：网格项居中对齐。stretch：网格项拉伸以填满整个网格单元。
使用 justify-self 属性，您可以根据需要调整单个网格项的对齐方式，以实现更灵活和定制化的布局效果。这个属性对于需要特定对齐方式的单个网格项特别有用，可以与 align-self 属性一起使用来控制网格项在垂直方向上的对齐方式。
如设置如下代码：
less
.one {
justify-self: start;
}
.two {
justify-self: center;
}
.three {
justify-self: end;
}
.four {
align-self: start;
}
.five {
align-self: stretch;
}
.six {
align-self: end;
}效果如下：
实现等分响应式
要求：实现等分响应式，容器居中对齐，项目之间的间距相等，项目可以随着浏览器窗口改变自动换行显示。
代码如下：
less
.container {
display: grid;
gap: 10px;
grid-auto-rows: 50px;
grid-template-columns: repeat(auto-fill, 100px);
justify-content: center;
}效果如下：
