Appearance
flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。
如图，实现三列布局，中间的宽度固定或者不固定，用flex布局碰见这种情况就很麻烦，只能伪元素去填充 所以用grid布局就很方便。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.wrapper {
width: 60%;
border: solid 1px red;
margin: 60px auto;
/* 声明一个容器 */
display: grid;
/* 声明列的宽度 */
grid-template-columns: repeat(3, 30%);
/* 声明行间距和列间距 */
grid-gap:20px 5%;
/* 声明行的高度 */
grid-template-rows: 100px 100px;
}
.item {
text-align: center;
font-size: 200%;
color: #fff;
background: #19CAAD;
}
</style>
<body>
<div class="wrapper">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
<div class="item">Five</div>
<div class="item">Six</div>
</div>
</body>
</html>
如图，列数行数都不固定，但是每一列的宽度固定
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.wrapper {
width: 60%;
border: solid 1px red;
margin: 60px auto;
/* 声明一个容器 */
display: grid;
/* 声明列的宽度 auto-fill 列数不固定 */
grid-template-columns: repeat(auto-fill, 200px);
/* 声明行间距和列间距 */
grid-gap:20px;
/* 声明行的高度 行数不固定，每一行的高度*/
grid-auto-rows: 100px;
}
.item {
text-align: center;
font-size: 200%;
color: #fff;
background: #19CAAD;
}
</style>
<body>
<div class="wrapper">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
<div class="item">Five</div>
<!-- <div class="item">Six</div> -->
</div>
</body>
</html>
如果 一列宽度固定，其他的宽度平分剩下的空间，类似 flex:1 的效果
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.wrapper {
width: 80%;
border: solid 1px red;
margin: 60px auto;
/* 声明一个容器 */
display: grid;
/* 声明列的宽度 后面两列平分剩余空间 */
/* 等价于 grid-template-columns: 200px auto auto;*/
grid-template-columns: 200px 1fr 1fr;
/* 声明行间距和列间距 */
grid-gap:20px;
/* 声明行的高度 行数不固定，每一行的高度*/
grid-auto-rows: 100px;
}
.item {
text-align: center;
font-size: 200%;
color: #fff;
background: #19CAAD;
}
</style>
<body>
<div class="wrapper">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
<div class="item">Five</div>
<!-- <div class="item">Six</div> -->
</div>
</body>
</html>
空一格的排列布局
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.wrapper {
width: 80%;
border: solid 1px red;
margin: 60px auto;
/* 声明一个容器 */
display: grid;
/* 声明列的宽度 */
grid-template-columns: 120px 120px 120px;
/* . 代表为空 */
grid-template-areas:
". header"
"sidebar content";
/* 声明行间距和列间距 */
grid-gap: 20px;
/* 声明行的高度 行数不固定，每一行的高度*/
grid-auto-rows: 100px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.box {
text-align: center;
font-size: 200%;
color: #fff;
background: #19CAAD;
}
</style>
<body>
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>
</body>
</html>grid-auto-flow 控制行的排布效果
如图效果实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.wrapper,
.wrapper-1,
.wrapper-2 {
margin: 50px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-auto-flow: row;
grid-gap: 5px;
grid-auto-rows: 50px;
}
.wrapper-1 {
display: grid;
grid-auto-columns: 100px;
grid-auto-flow: column;
grid-gap: 5px;
grid-template-rows: 50px 50px;
}
.wrapper-2 {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-auto-flow: row dense;
grid-gap: 5px;
grid-auto-rows: 50px;
}
.one {
background: #19CAAD;
}
.two {
background: #8CC7B5;
}
.three {
background: #D1BA74;
}
.four {
background: #BEE7E9;
}
.five {
background: #E6CEAC;
}
.six {
/* 两倍大小 */
grid-column-start: span 2;
background: #ECAD9E;
}
.seven {
background: #BEEDC7;
}
.eight {
background: #F4606C;
}
.nine {
background: #A0EEE1;
}
.item {
text-align: center;
font-size: 200%;
color: #fff;
}
</style>
<body>
<h1>先行后列</h1>
<div class="wrapper">
<div class="one item">One</div>
<div class="two item">Two</div>
<div class="three item">Three</div>
<div class="four item">Four</div>
<div class="five item">Five</div>
<div class="six item">Six</div>
<div class="seven item">Seven</div>
<div class="eight item">eight</div>
<div class="nine item">Nine</div>
</div>
<h1>先列后行</h1>
<div class="wrapper-1">
<div class="one item">One</div>
<div class="two item">Two</div>
<div class="three item">Three</div>
<div class="four item">Four</div>
<div class="five item">Five</div>
<div class="six item">Six</div>
<div class="seven item">Seven</div>
<div class="eight item">eight</div>
<div class="nine item">Nine</div>
</div>
<h1>先行后列：dense</h1>
<div class="wrapper-2">
<div class="one item">One</div>
<div class="two item">Two</div>
<div class="three item">Three</div>
<div class="four item">Four</div>
<div class="five item">Five</div>
<div class="six item">Six</div>
<div class="seven item">Seven</div>
<div class="eight item">eight</div>
<div class="nine item">Nine</div>
</div>
</body>
</html>