[Grid佈局] - 快到格子裏來

Grid佈局定義

CSS的網格佈局模塊提供了一個基於網格的佈局系統，可以以行和列來進行佈局，使其更容易設計網頁，而沒必要使用浮標和定位。
只要給塊級元素設置display:grid 或者給內聯元素設置display:inline-grid， Grid佈局就能夠建立

先看一下效果

display屬性被設置爲網格或內聯網格。

使用grid佈局主要須要作的是將display設置爲grid(塊級元素)或inline-grid(內聯元素)

// grid-container稱爲grid容器
<div class="grid-container">
  // grid-item稱爲grid子項
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div> 
</div>

<style> .grid-container { display: grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-size: 30px; text-align: center; } </style>
複製代碼

主要屬性介紹

爲了使一個HTML元素表現爲一個網格容器，你必須設置顯示屬性爲網格或內聯網格。網格容器組成的網格項目，網格項目又置於行和列內。

grid-template-columns

該屬性定義的列數在網格佈局，它能夠定義每一個列的寬度。其值是一個空格分隔列表，其中每一個值定義的相應列的長度。
css數據類型，表示網格容器內的靈活長度（如1fr,1.5fr)

注意：爲了方便表示比例關係，網格佈局提供了fr關鍵字（fraction 的縮寫，意爲"片斷"）。若是兩列的寬度分別爲1fr和1.5fr，就表示後者是前者的1.5倍。

語法：
grid-template-columns: <track-size> ... | <line-name> <track-size>...

• ：寬度尺寸。能夠是長度值，百分比值，以及fr單位（網格剩餘空間比例單位）。
• ：自定義的命名。

.grid-container {
  display: grid;
  //網格佈局有4列,所佔寬度分別爲50px 40px 30nepx 20px
  grid-template-columns: 50px 40px 30px 20px;
  //網格佈局有5列,所佔寬度分別以下
  grid-template-columns: 50px 40px 30px 20px 10px;
  // 容器分紅3列，一列寬度爲50px，而後將容器剩下的部分紅2個部分,第二列和第三列各佔1個部分
  grid-template-columns: 50px 1fr 1fr;
  // 自定義命名
  grid-template-columns: [第一縱線] 80px [縱線2] auto [縱線3] 100px [最後的結束線];
}
複製代碼

grid-template-rows

該屬性定義每一行的高度。
語法：
grid-template-rows: <track-size> ... | <line-name> <track-size> ...

• ：寬度尺寸。能夠是長度值，百分比值，以及fr單位（網格剩餘空間比例單位）。
• ：自定義的命名。

.grid-container {
  display: grid;
  // 網格佈局有2行,所佔高度分別以下80px 200px
  grid-template-rows: 80px 200px;
  // 容器分紅3行，一行高度爲50px，而後將容器剩下的高度分爲2個部分,第二行和第三行高度各佔1個部分
  grid-template-rows: 50px 1fr 1fr;
  // 任意命名
  grid-template-rows: [第一行開始] 25% [第一行結束] 100px [行3] auto [行4] 60px [行末];
}
複製代碼

justify-content

該屬性用於橫向對準容器內整個網格
語法：

justify-content: stretch | start | end | center | space-between | space-around | space-evenly
複製代碼

可能取值

• stretch：默認值。拉伸，寬度填滿grid容器，拉伸效果須要網格目標尺寸設爲auto時候纔有效，若是定死了寬度，則沒法拉伸。
• space-evenly：evenly是勻稱、平等的意思。也就是視覺上，每一個flex子項兩側空白間距徹底相等。
• space-around：around是環繞的意思，意思是每一個flex子項兩側都環繞互不干擾的等寬的空白間距，最終視覺上邊緣兩側的空白只有中間空白寬度一半。
• space-between：表現爲兩端對齊。between是中間的意思，意思是多餘的空白間距只在元素中間區域分配。
• center：表現爲居中對齊。
• start: 邏輯CSS屬性值，與文檔流方向相關。對齊容器的起始邊框,默認表現爲左對齊。
• end：邏輯CSS屬性值，與文檔流方向相關。對齊容器的結束邊框,默認表現爲右對齊。

.grid-container {
  display: grid;
  justify-content: end;
}
複製代碼

space-evenly	space-around	space-between	center	start	end

align-content

該屬性用於豎直地對準在容器內部的整個網格。
語法：

align-content: stretch | start | end | center | space-between | space-around | space-evenly
複製代碼

可能取值

• stretch：默認值。每一行flex子元素都等比例拉伸。例如，若是共兩行flex子元素，則每一行拉伸高度是50%。
• start： 邏輯CSS屬性值，與文檔流方向相關。默認表現爲頂部開始。
• end： 邏輯CSS屬性值，與文檔流方向相關。默認表現爲底部開始。
• center： 表現爲總體垂直居中對齊。
• space-between: 上下兩行兩端對齊。剩下每一行元素等分剩餘空間。
• space-around： 每一行元素上下都享有獨立不重疊的空白空間。
• space-evenly： 每一行元素都徹底上下等分。

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}
複製代碼

place-content

該屬性可讓align-content和justify-content屬性縮寫在一個CSS聲明中 語法：

// 因爲兼容性問題， 不建議合在一塊兒
place-items: <align-content> / <justify-content>
複製代碼

網格間隙

每列/行之間的間隙被稱爲間隙

.grid-container {
  display: grid; // 網格佈局
  grid-column-gap: 50px; // 列間距50px
  grid-row-gap: 10px; // 行間距10px
  grid-gap: 10px 50px ; // 分別設置行間距10px, 列間距50px
}
複製代碼

網格線

列之間的線被稱爲列線。
行之間的線被稱爲行線。

示例

放置在列線1的網格項目，並讓它結束對列線3。

可能取值：

grid-column-start: <number> | <name> | span <number> | span <name> | auto
複製代碼

：起止於第幾條網格線。
：自定義的網格線的名稱。
span ：當前網格會自動跨越指定的網格數量。
span ：當前網格會自動擴展，直到命中指定的網格線名稱。
auto：全自動，包括定位，跨度等。

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
複製代碼

同理放在在排線(行線)1的網格項目，並讓它結束對排線3

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}
複製代碼

grid-column（grid-column-start + grid-column-end）屬性定義在其上的列（多個）放置的一個項目

可能取值：

grid-column: <start-line> / <end-line> | <start-line> / span <value>;
複製代碼

eg:讓item1在1號線開始和3號線結束：

.item1 {
  grid-column: 1 / 3;
}
複製代碼

eg:讓item1開始在1號線開始和跨度3列結束：

.item1 {
  grid-column: 1 / span 3;
}
複製代碼

eg:讓item1開始在2號線開始和跨度2列結束：

.item1 {
  grid-column: 2 / span 3;
}
複製代碼

grid-row（grid-row-start + grid-row-end）屬性定義哪一行放置一個項目

可能取值及原理同grid-column

grid-area

該屬性表示當前網格所佔用的區域，能夠被用做速記屬性爲 網格行啓動，網格列啓動，網格行截止和網格列截止的特性

語法：

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>
複製代碼

可能取值：

• : 區域名稱。由grid-template-areas屬性建立。
• / / / : 佔據網格區域的縱橫起始位置。

eg:使「item1」上行線1和列線2開始，上行線4和列線3結束

.item1 {
  grid-area: 1 / 2 / 4 / 3;
}
複製代碼

eg:使「item1」對行線1和列2號線和跨度2行跨度3列結束

.item1 {
  grid-area: 1 / 2 / span 2 / span 3;
}
複製代碼

命名網格項目

grid-area屬性也能夠爲網格項目Item命名

.item1 {
  // item1將被命名爲「myArea」
  grid-area: myArea;
}
.grid-container {
  //item1跨越的3列網格佈局全部3列：
  grid-template-areas: 'myArea myArea myArea';
}
複製代碼

.item1 {
  // item1將被命名爲「myArea」
  grid-area: myArea;
}
.grid-container {
  //item1跨越的5列網格佈局中的3列
  grid-template-areas: 'myArea myArea myArea . . ';
}
複製代碼

.item1 {
  grid-area: myArea;
}

.grid-container {
  // 讓item1跨越兩列和兩行：
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
} 
複製代碼

隱式網格

使用grid-auto-rows, grid-auto-columns, grid-auto-flow來設置隱式網格

• grid-auto-rows：隱含建立的網格行的大小
• grid-auto-columns：隱含建立的網格列的大小軌道
• grid-auto-flow：隱含建立的網格的默認流方向

.grid-container {
  display: grid;
  background-color: #2196F3;
  padding: 10px;
  grid-gap:5px;
  // 行高度70px
  grid-template-rows: 70px;
  // 2列鋪滿各站1半
  grid-template-columns: repeat(2, 1fr);
  // 隱含建立的網格行的大小140px
  grid-auto-rows: 140px;
  // 隱含建立的網格的默認流方向: 行方向
  grid-auto-flow: row;
} 
複製代碼

Grid屬性集

做用在grid容器上	做用在grid子項上
grid-template-columns（列寬）	grid-column-start
grid-template-rows（行高）	grid-column-end
grid-template-areas（命名網格）	grid-row-start
grid-template	grid-row-end
grid-column-gap（列間距）	grid-column
grid-row-gap	grid-row
grid-gap	grid-area
justify-items（水平呈現方式）	justify-self
align-items（垂直呈現方式）	align-self
place-items （水平垂直呈現方式）	place-self
justify-content（水平分佈方式）
align-content（垂直方向的分佈方式）
place-content
grid-auto-columns（隱式建立列大小）
grid-auto-rows
grid-auto-flow
grid（網格佈局）

Grid與Flex主要區別

• Grid佈局則適用於更大規模的佈局（二維佈局）， 處理一些不規則和非對稱的設計。
• Flexbox佈局最適合應用程序的組件和小規模佈局（一維佈局）

---

雖然grid存在必定的兼容（以下圖），可是依照flex的趨勢，grid的時代必然會來

關於咱們

快狗打車前端團隊專一前端技術分享，按期推送高質量文章，歡迎關注點贊。

參考文章：

• CSS Grid Layout Module
• learn css grid