使用 Grid 進行常見佈局

shanyue發表於2019-02-23

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。

使用 Grid 進行常見佈局

.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

使用 Grid 進行常見佈局

.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 進行柵格系統的佈局也是很簡單。

使用 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 屬性來設定複雜佈局。

使用 Grid 進行常見佈局

<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 設定間隙。 使用 Grid 進行常見佈局

.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;
}
複製程式碼

參考

相關文章