css網格佈局(display: grid | inline-grid)

css網格佈局是css中最強大的佈局系統。它是一個二維繫統，這意味着它能夠處理列和行，不像flexbox主要是一維繫統。經過css規則應用於父元素（成爲網格容器）和該元素的子元素（網格項），您能夠使用網格佈局。

介紹

css網格佈局（又名「網格」）是一種基於網絡的二維佈局系統，旨在徹底改變咱們設計基於網格的用戶界面的方式。css一直被用來佈局咱們的網頁，但它從未作過很好的工做。好比使用表格table，浮動float，定位position等，都很容易出現一些遺漏的功能和問題。譬如垂直居中。flexbox雖然對這樣狀況有所幫助，但它只是適用於更簡單但一維佈局，而不是複雜的二維佈局（flexbox和grid實際上能夠很好的協同工做，簡化咱們的css代碼）。grid是第一個專門解決佈局問題的css模塊，只要咱們一直在製做網站，咱們就一直在討論這些問題。

瀏覽器支持狀況

grid基本屬性

網格容器grid container

它是全部網格項的直接父級。在下面例子中container是網格容器。

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>複製代碼

網格項目grid item

網格容器的子節點，即爲直接後代。下面例子中item元素是網格項，但sub-item不是。

<div class="container">
  <div class="item"></div> 
  <div class="item">
      <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>複製代碼

網格線grid line

構成網格結構的分界線。它們能夠是垂直（‘列網格線’）或水平（‘行網絡線’），位於和行和列的任一側

網絡軌道grid track

能夠理解爲行和列所佈局的方向，默認從左到右，從上到下

網格單元grid cell

相鄰行和相鄰列網格線之間到空間。即爲單個網格到‘單元’

網格區域grid area

多個網格線包圍的總空間。網格區域能夠包含任意數量的網格單元。

網格屬性目錄

父級的屬性

• grid - 生成塊級網格
• inline-grid - 生成內聯級網格

.container {
    display: grid | inline-grid;
}複製代碼

grid-template-columns | grid-template-rows

使用以空格分隔的值列表定義網格的列和行。值表示軌道的大小，之間的空間表示網格線。例如（下圖爲效果圖，線條實際不存在）：

.container {
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}複製代碼

若是您的定義包含重複部分，則能夠使用該 repeat() 表示法來簡化事物：

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}複製代碼

至關於

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}複製代碼

網格模板區（grid-area）

• grid-area-name - 使用指定的網格區域的名稱grid-area
• 。- 句點表示網格單元格
• none - 沒有定義網格區域

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}複製代碼

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}複製代碼

以上css將建立一個四列寬三行高的網格。整個頂行將由標題區域組成。中間行將包括兩個主要區域，一個空單元格和一個側邊欄區域。最後一行是全部頁腳。表現效果大概以下圖：

網格間隙（行間隙grid-column-gap,列間隙grid-row-gap）

簡寫方式爲
.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}複製代碼

例如：
.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}複製代碼

單元格對齊方式align-items(垂直對齊方式); justify-items(水平對齊方式)

• start
  - 將要與其單元格的起始邊緣齊平的項目對齊
• end
  - 將項目與其單元格的結束邊緣齊平
• center
  - 對齊其單元格中心的項目
• stretch
  - 填充單元格的整個寬度（這是默認值）

.container {
  justify-items: start | end | center | stretch;
}複製代碼

.container {
  align-items: start | end | center | stretch;
}複製代碼

本文原文檔地址css-tricks.com/snippets/cs…

根據以上文檔基本能夠自定義一個佈局組件。如本人用polymer定義了一個組件grid-layout。

github地址爲github.com/wanbo-chain…