Grid布局和之前的使用浮动布局思路上有很大不同，使用浮动布局更多的像时画页面，而Grid布局从意义上面更接近布局这个词，因为它的布局思路时先把大框架搭好，然后往里面填塞内容为什么这么说呢？
html代码
<div class="container">
</div>
css代码
.container {
width:400px;
height:300px;
border:1px solid red;
display:grid;
grid-template-columns:50px auto 50px;
grid-template-rows:50px auto 50px;
}
这样我们打开控制台就能看到有几条隐形的线存在
1.jpg
fr也时Grid布局中的一个概念，自由空间内fr的自由空间总量的商值
.container {
width:400px;
height:300px;
border:1px solid red;
display:grid;
grid-template-columns:50px 1fr 50px 1fr;
grid-template-rows:50px 1fr 50px 1fr;
}
上述代码的意思就可以理解成宽度和高度减去100px后分成分成了2分，每份为1fr
2.jpg
当我们设置好大致的布局后，我们往里面填充内容
代码
<style>
.container {
width:400px;
height:300px;
border:1px solid red;
display:grid;
grid-template-columns:50px auto 50px;
grid-template-rows:50px auto 50px;
grid-template-areas:
"header header header"
". main sidebar"
"footer footer footer"
}
header {
background:yellow;
grid-area:header
}
main {
background:blue;
grid-area:main
}
.sidebar {
background:red;
grid-area:sidebar
}
footer{
background:green;
grid-area:footer
}
</style>
<div class="container">
<header></header>
<main></main><div class="sidebar"></div>
<footer></footer>
</div>
1543830689(1).jpg
