使用grid來進行常見佈局

grid 佈局是W3C提出的一個二維佈局系統，經過 display: grid 來設置使用，對於之前一些複雜的佈局可以獲得更簡單的解決。本篇文章經過幾個佈局來對對 grid 佈局進行一個簡單的瞭解。目前，grid 僅僅只有 Edge使用前綴可以支持，爲了更好地體驗，能夠使用 Chrome 瀏覽器，在 chrome://flags 開啓 #enable-experimental-web-platform-features 選項。
另外，更多的例子能夠前往 Grid by examples, 更多的用法能夠前往 W3 Specification,也能夠前往 A Complete Guide to Grid

Live Demo

左右固定中間自適應

之前，這須要使用 negative margin，float, position 解決，聖盃佈局是一個比較好的解決方案。後來，flex橫空出世，使用 flex-grow 與 flex-basis 完成自適應佈局。grid 佈局相比 flex 佈局更加簡單，只須要在 container 上設置 grid-template-columns: 100px auto 100px。

.container {
  display: grid;
  grid-template-columns: 100px auto 200px;
}

三等分

之前的方法能夠設置 float: left; width: 33.33333333，使用 flex 能夠設置 flex-basis: 33.33333333。在 grid 中只須要設置 grid-template-columns: 1fr 1fr 1fr

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 100px;
  background-color: #feb;
}

三七分

在 grid 中設置 container 爲十等分，能夠使用 grid-template-columns: repeat(10, 1fr)。
repeat 爲重複10次 1fr。grid-column 爲 grid-column-start 與 grid-column-end 的縮寫，表示起止的 line。使用 grid 進行柵格系統的佈局也是很簡單。

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.column-3 {
  grid-column: 1 / 4;
}

.column-7 {
  grid-column: 4 / 11;
}

複雜佈局

以上幾個例子，均是單向佈局，flex 就能很好的解決，而以下幾個佈局，均是二維佈局，傳統佈局有些困難。如下示例圖，能夠在 container 上使用 grid-template-areas，在 item 上設置 grid-area 屬性來設置複雜佈局。

<div class="grid-layout">
  <div class="header">header</div>
  <div class="left">left</div>
  <div class="main">main</div>
  <div class="right">right</div>
  <div class="footer">footer</div>
</div>

.container {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 40px 300px 50px;
  grid-template-areas: "header header header"
                       "left main right"
                       "footer footer footer";
}

.container .header {
  grid-area: header;
}

.container .footer {
  grid-area: footer;
}

.container .left {
  grid-area: left;
}

.container .right {
  grid-area: right;
}

.container .main {
  grid-area: main;
}

九宮格

在傳統佈局中就比較有困難。在 grid 中設置三行三列等寬，並使用 grid-gap 設置間隙。
<img src="https://shfshanyue.github.io/...; width="300" height="300">

.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 8px;
  border: 1px solid #fac;
  padding: 8px;
}

參考

• A Complete Guide to Grid
• W3 Specification
• Grid by examples
• caniuse
• Grid polyfill