Grid布局和之前的使用浮動布局思路上有很大不同，使用浮動布局更多的像時畫頁面，而Grid布局從意義上面更接近布局這個詞，因為它的布局思路時先把大框架搭好，然后往里面填塞內(nèi)容為什么這么說呢？
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布局中的一個概念，自由空間內(nèi)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

當我們設(shè)置好大致的布局后，我們往里面填充內(nèi)容
代碼

<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