Grid佈局

Web佈局經歷的四個階段：
1、table
2、float和position定位
3、flex
4、grid

grid也分爲網格容器和網格項目

網格容器

display: grid 生成一個塊級網格
display: inline-grid 生成一個內聯網格
display: subgrid 如果你的網格容器是另一個網格的網格項，可以用這個屬性表示

如果我們只是單純地添加上面兩個屬性，盒子的佈局方式看起來並沒有什麼變化，要使它成爲二維網格容器，我們需要定義行和列，用grid-template-columns和grid-template-rows屬性，可取的值有長度值，百分比，或者等份網格容器中可用空間（使用fr單位）。我們還可以給網格線起名字，詳情參見http://www.css88.com/archives/8510

<div id="div1">
  <div style="background-color: lightpink">1</div>
  <div style="background-color: yellow">2</div>
  <div style="background-color: red;">3</div>
  <div style="background-color: grey">4</div>
  <div style="background-color: green">5</div>
  <div style="background-color: lightgrey">6</div>
</div>

#div1 {
  background-color: pink;
  /*-webkit-display: grid;*/
  /*display: grid;*/
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 40px;
}

效果如圖

放置子元素

定位和調整子元素大小用grid-column和grid-row屬性來設置

我們希望item1佔據從第一天網格線開始，到第四條網格線結束（換句話說，它獨立佔據整行）

<div id="div1">
  <div style="background-color: lightpink">1</div>
  <div style="background-color: yellow">2</div>
  <div style="background-color: red;">3</div>
  <div style="background-color: grey">4</div>
  <div style="background-color: green">5</div>
  <div style="background-color: lightgrey">6</div>
</div>

#div1 {
  background-color: pink;
  /*-webkit-display: grid;*/
  /*display: grid;*/
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 40px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

效果如圖

上面css代碼的簡寫

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

一個更靈活的佈局示例：

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

.item3 {
  grid-row: 2 / 4;
}

.item4 {
  grid-column: 2 / 4;
}

效果如

grid-template-areas

通過引用grid-area屬性指定的網格區域名稱來定義網絡模板。重複網格區域的名稱導致內容跨越這些單元格。一個.號代表一個空的網格單元。這個語法本身可視作網格可視化結構。
取值：

• : 由網格項的的grid-area指定的網格區域名稱
• .:代表一個空的網格單元
• none：不定義網格區域

代碼示例：

#div1 {
  background-color: pink;
  /*-webkit-display: grid;*/
  /*display: grid;*/
  display: grid;
  /*grid-template-columns: 100px 100px 100px;*/
  /*grid-template-rows: 40px;*/
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px;
  grid-template-areas:
  "header header header header"
  "main main . sidebar"
  "footer footer footer footer";
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: main;
}

.item3 {
  grid-area: sidebar;
}

.item4 {
  grid-area: footer;
}