Grid 佈局

時間 2019-11-26

標籤 grid 佈局简体版

原文原文鏈接

1：基本佈局

Grid 佈局是二維的基於網格的佈局系統，它能夠同時處理列和行（這是對比flex彈性盒模型佈局而言）；第一個專門爲解決佈局問題而生的CSS模塊。瀏覽器

幾個基本概念：佈局

Grid Container，又叫作Grid容器，就是設置了display：grid的元素。flex

.main{
        display:grid;
    }

Grid Item，又叫作Grid容器成員，Grid容器下面的直接子元素。spa

Gird Line，Grid容器行和列的網格線；它又分爲垂直網格線（column grid lines）和水平網格線（row grid lines）。code

Gird Track，兩個相鄰網格線之間的空間。blog

Grid Cell，兩個相鄰的行和兩個相鄰的列網格線之間的空間，基礎單元。it

Grid Area，四個網格線包圍的總空間，能夠由任意數量的Grid Cell組成。table

2：瀏覽器兼容

3：Grid容器 (Grid Container) 屬性

經常使用的屬性有14個：模板

display，分爲grid（塊級網格）和inline-grid（行級網格）

.main {
    	    display: grid;
    	}
    	.main {
    	    display: inline-grid;
    	}

grid-template-columns/rows，定義了網格的行和列

.main{
         grid-template-columns: [<Grid Line Name>] <Grid Track Size> ...;
         grid-template-rows: [<Grid Line Name>] <Grid Track Size> ...;
    }

基本語法

.main {
       display: grid;
       grid-template-columns: [columns-1] 100px [columns-2] 200px auto;
       grid-template-rows: [rows-1] 100px [rows-2] 200px;
   }

重複

.main {
       display: grid;
       grid-template-columns: repeat(4, 100px [columns]) auto;
       grid-template-rows: repeat(4, 100px [rows]);
   }

自由空間，給定比例，自由分配空間

.main {
      display: grid;
      grid-template-columns: 100px 1fr 3fr;
      grid-template-rows: 100px 1fr 3fr;
  }

grid-template-areas（定義網格模板）

.header {
  	grid-area: header;
  	background: #8A469B;
  }
  .left {
  	grid-area: left;
  	background: #EA7F26;
  }
  .right {
  	grid-area: right;
  	background: #EA7F26;
  }
  .footer {
  	grid-area: footer;
  	background: #8A469B;
  }
  .main {
  	height: 500px;
  	display: grid;
  	//縱向分紅了5個
  	grid-template-columns: 100px 100px auto 100px 100px;
  	//橫向分紅3個
  	grid-template-rows: 100px auto 100px;;
  	grid-template-areas:
  	    "header header header header header"
  	    "left left . . right"
  	    "footer footer footer footer footer";
  }

grid-template（grid-template-rows、grid-template-column、grid-template-areas的簡寫）

.main {
       height: 500px;
       display: grid;
       grid-template:
  		[title-left] "title title title" 80px [title-right]
           [content-left] "left content content" 1fr [content-right]
           [footer-left] "left footer footer" 80px [footer-right]/ 120px 1fr 120px;
  }

grid-column/row-gap（網格線的寬度/高度）

.main {
      display: grid;
      grid-template-columns: 100px 200px auto;
      grid-template-rows: 100px 200px;
      grid-column-gap: 20px;
      grid-row-gap: 20px;
  }

grid-gap（網格線的寬度/高度簡寫形式）

.main {
      display: grid;
      grid-template-columns: 100px 200px auto;
      grid-template-rows: 100px 200px;
      grid-gap: 20px 30px;
  }

justify-items（元素在Grid Cell橫軸上的對齊方式，出現的前提是元素要小於Grid Cell的尺寸），它一共有4個值：start、end、center、stretch（默認）；stretch使用時要去掉元素的寬度，否則無效。
```
.main {
      display: grid;
      justify-items: start;
  }
```
align-items（元素在Grid Cell縱軸上的對齊方式），同上justify-item同樣也是有四個屬性值相同。
```
.main {
      display: grid;
      align-items: start;
  }
```
justify-content（Grid Cell在橫軸上的對齊方式），它一共有7個值：start、end、center、stretch、space-around、space-between、space-evenly。
```
.main {
      display: grid;
      justify-content: start;
  }
```
align-content（Grid Cell在縱軸上的對齊方式），同上。
```
.main {
      display: grid;
      align-content: start;
  }
```
grid-auto-columns/rows（自動生成網格(隱式) ，出現場景：網格溢出時子元素超過父元素使用）基本語法
```
.main {
      display: grid;
      grid-auto-columns: <Grid Track Size> ...;
      grid-auto-rows: <Grid Track Size> ...;
  }
```
使用的狀況分爲兩種：不指定grid-auto-columns和指定grid-auto-columns。
grid-auto-flow（自動放置Grid容器成員，出現的前提是不指定grid-template-areas，不指定每一個元素的放法），它有三個值：row（按行填充）、column（按列填充）、dense（按最小剩餘空間填充）
```
.main {
      display: grid;
      grid-auto-flow: row;
  }
```

grid（template-rows、template-columns、template-areas、auto-rows、auto-columns、auto-flow簡寫）

.main {
      grid: [row1-start] "header header header" 1fr [row1-end]
            [row2-start] "footer footer footer" 25px [row2-end]/ auto 50px auto;
  }

4：Grid容器成員 (Grid Item) 屬性

經常使用屬性有9個：容器

grid-column-start/end（根據網格線肯定Grid Item位置），它一共有四個值：number、name、span number（跨過幾條網格線）、span name（跨越到哪一根網格線）。 .main { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .item { grid-column-start: 2; grid-column-end: span 4; }

grid-row-start/end（根據網格線肯定Grid Item位置）

.main {
  	display: grid;
  	grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
  }
  .item {
  	grid-row-start: span 2;
  	grid-row-end: 4;
  }

grid-column/row（grid-column/row-start/end簡寫）

.main {
      display: grid;
      grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }
  .item {
      grid-column: span 2 / 4;
      grid-row: 1 / 4;
  }

grid-area（建立區域），分爲兩種狀況：命名引用和直接定義。

命名引用 grid-area:name;

直接定義 grid-area: name | row-start | column-start | row-end | column-end

.main {
      display: grid;
      grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }
  .item {
      grid-area: item;
      grid-area: 3 / 1 / 4 / 6;
  }

justify-self（元素在Grid Cell橫軸上的對齊方式 - 只對單個元素），它一共有四個值：start、end、center、stretch。

.main {
  	display: grid;
  	grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
  }
  .item {
  	justify-self: start;
  }

align-self（元素在Grid Cell縱軸上的對齊方式 - 只對單個元素生效），同上。

.main {
  	display: grid;
  	grid-template-columns: 100px 100px 100px;
  	grid-template-rows: 100px 100px 100px;
  }
  .item {
  	align-self: start;
  }

5：Grid網格佈局注意事項

Grid網格佈局適用於頁面總體佈局
Grid容器成員添加float、table-cell、inline-block屬性無效
不推薦中文命名，中文命名會出現亂碼致使name沒法匹配

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。