使用 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 以及譯文
2019年2月注：目前 Grid 已被所有主流瀏覽器所支援
原文連結見:山月的部落格
左右固定中間自適應
以前，這需要使用 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 設定間隙。 
.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;
}
複製程式碼