css的grid布局
grid布局即网格布局是一种二维布局，可以同时控制行和列的排布和对齐方式，grid布局由水平线和垂直线构成，两条水平线之间的区域叫做行轨道，两条垂直线的区域叫做列轨道。
使用这种布局方式只需要给外层容器（父容器）设置 display: grid; 此时容器的直接子元素就会自动称为grid布局的元素。
.grid {
display: grid
}
grid布局中的属性：
.grid {
/* 为grid盒子开启grid布局 */
display: grid;
/* 使用grid-template-column 属性指定每列的宽度,可以是固定宽度px，也可以是浮动宽度fr，fr是grid布局专用单位，代表grid剩余空间 */
/* grid-template-columns: 300px; */
/* 这里有三个数据，就说明grid的分布图为3列形式，这里都相等表示均分剩余空间 */
grid-template-columns: 1fr 1fr 1fr;
/* 使用column-gap属性设置列间距 */
column-gap: 10px;
/* 使用row-gap设置行间距 */
row-gap: 10px;
/* 或者使用gap属性统一设置，一下代码等同于上两行代码 */
gap: 10px;
}
对元素进行排列时，grid-template-areas属性的用法：
<style>
/* 使用grid布局实现三列布局 */
.grid {
/* 为grid盒子开启grid布局 */
display: grid;
/* 使用grid-template-column 属性指定每列的宽度,可以是固定宽度px，也可以是浮动宽度fr，fr是grid布局专用单位，代表grid剩余空间 */
/* grid-template-columns: 300px; */
/* 这里有三个数据，就说明grid的分布图为3列形式，这里都相等表示均分剩余空间 */
grid-template-columns: 1fr 1fr 1fr;
/* 使用column-gap属性设置列间距 */
column-gap: 10px;
/* 使用row-gap设置行间距 */
row-gap: 10px;
/* 或者使用gap属性统一设置，一下代码等同于上两行代码 */
gap: 10px;
}
.grid div {
/* width: 33vw; */
height: 70px;
background-color: skyblue;
border: 1px solid black;
}
.grid1 {
margin-top: 50px;
display: grid;
/* 排列元素我们可以使用grid-template-areas属性，注意这里是设置了三行表格，并且每列用3分进行分布的 */
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer"
}
header {
/* 命名此空间为header */
grid-area: header;
background-color: skyblue;
height: 60px;
}
aside {
grid-area: sidebar;
background-color: red;
height: 60px;
}
main {
grid-area: content;
background-color: blue;
height: 60px;
}
footer {
grid-area: footer;
background-color: green;
height: 60px;
}
</style>
grid布局的对齐方式
grid布局的对齐方式和flex布局对齐方式类似，有水平方向的行轴和垂直方向的块轴。
在垂直方向上对齐子元素（对网格中的元素）是使用align-items：
.grid {
display: grid;
align-items: center|end //沿垂直轴居中、靠下对齐
}
在水平方向上对齐子元素是使用justify-items：
.grid {
display: grid;
justify-items: center|end|space-between //居中、靠右、两段对齐
}
当行轨道和列轨道(整体网格)小于grid容器时，还可以对轨道进行对齐：
.grid {
display: grid;
align-content: center|end; //在垂直方向上使用align-content设置对其方式：
justify-content: center|end|between //在水平方向使用justify-content设置对其方式
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 使用flex布局实现三列排布 */
/* 使用grid布局实现三列布局 */
.grid {
/* 为grid盒子开启grid布局 */
display: grid;
/* 使用grid-template-column 属性指定每列的宽度,可以是固定宽度px，也可以是浮动宽度fr，fr是grid布局专用单位，代表grid剩余空间 */
/* grid-template-columns: 300px; */
/* 这里有三个数据，就说明grid的分布图为3列形式，这里都相等表示均分剩余空间 */
grid-template-columns: 1fr 1fr 1fr;
/* 使用column-gap属性设置列间距 */
column-gap: 10px;
/* 使用row-gap设置行间距 */
row-gap: 10px;
/* 或者使用gap属性统一设置，一下代码等同于上两行代码 */
gap: 10px;
}
.grid div {
/* width: 33vw; */
height: 70px;
background-color: skyblue;
border: 1px solid black;
}
.grid1 {
width: 100vw;
height: 100vh;
border: 1px solid black;
margin-top: 50px;
display: grid;
/* 排列元素我们可以使用grid-template-areas属性，注意这里是设置了三行表格，并且每列用3分进行分布的 */
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer"
}
header {
/* 命名此空间为header */
grid-area: header;
background-color: skyblue;
height: 60px;
}
aside {
grid-area: sidebar;
background-color: red;
height: 60px;
}
main {
grid-area: content;
background-color: blue;
height: 60px;
}
footer {
grid-area: footer;
background-color: green;
height: 60px;
}
.grid2 {
border: 1px solid black;
display: grid;
grid-template-columns: 300px 300px 300px;
gap: 20px;
/* 让整个网格居中显示 */
justify-content: center;
/* 使表格内部的表格元素居中显示 */
justify-items: center;
}
.grid2 div {
height: 100px;
background-color: skyblue;
}
</style>
<body>
<div class="grid">
<div class="column1">column1</div>
<div class="column2">column2</div>
<div class="column3">column3</div>
<div class="column4">column4</div>
<div class="column5">column5</div>
<div class="column6">column6</div>
</div>
<div class="grid1">
<header>头部</header>
<aside>侧边栏</aside>
<main>内容</main>
<footer>底部</footer>
</div>
<div class="grid2">
<div class="column1">column1</div>
<div class="column2">column2</div>
<div class="column3">column3</div>
<div class="column4">column4</div>
<div class="column5">column5</div>
<div class="column6">column6</div>
</div>
</body>
</html>
使用flex布局和grid布局实现三列表格布局：
flex布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 使用flex布局实现三列排布 */
.grid {
display: flex;
flex-wrap: wrap;
/* box-sizing: border-box; */
width: 100vw;
/* height: 100vh; */
}
.grid div {
width: 33vw;
height: 70px;
background-color: skyblue;
border: 1px solid black;
}
/* 使用grid布局实现三列布局 */
</style>
<body>
<div class="grid">
<div class="column1">column1</div>
<div class="column2">column2</div>
<div class="column3">column3</div>
<div class="column4">column4</div>
<div class="column5">column5</div>
<div class="column6">column6</div>
</div>
</body>
</html>
grid布局实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 使用flex布局实现三列排布 */
/* 使用grid布局实现三列布局 */
.grid {
/* 为grid盒子开启grid布局 */
display: grid;
/* 使用grid-template-column 属性指定每列的宽度,可以是固定宽度px，也可以是浮动宽度fr，fr是grid布局专用单位，代表grid剩余空间 */
/* grid-template-columns: 300px; */
/* 这里有三个数据，就说明grid的分布图为3列形式，这里都相等表示均分剩余空间 */
grid-template-columns: 1fr 1fr 1fr;
/* 使用column-gap属性设置列间距 */
column-gap: 10px;
/* 使用row-gap设置行间距 */
row-gap: 10px;
/* 或者使用gap属性统一设置，一下代码等同于上两行代码 */
gap: 10px;
}
.grid div {
/* width: 33vw; */
height: 70px;
background-color: skyblue;
border: 1px solid black;
}
</style>
<body>
<div class="grid">
<div class="column1">column1</div>
<div class="column2">column2</div>
<div class="column3">column3</div>
<div class="column4">column4</div>
<div class="column5">column5</div>
<div class="column6">column6</div>
</div>
</body>
</html>