轻松上手Grid布局

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