摘要：和絕對(duì)定位和絕對(duì)定位如果父容器有定位標(biāo)識(shí)等，那么下面的子會(huì)根據(jù)原始它們應(yīng)該布局的位置定位，反之如果父容器沒有定位標(biāo)識(shí)，那么應(yīng)用了會(huì)脫離布局，并且按照傳統(tǒng)的方式布局。

基本概念

MDN上的解釋是這樣的

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

另外，下面一段話摘自A Complete Guide to Grid，對(duì)于CSS Grid會(huì)有更加清楚地釋義

CSS Grid Layout (aka "Grid"), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces.

總結(jié)來說：

• CSS Grid 是一個(gè)二維的布局系統(tǒng)
• CSS Grid 相比傳統(tǒng)布局在頁面整體劃分布局上更加出色
• CSS Grid 并不是只能多帶帶使用，依然可以搭配Flexbox以及傳統(tǒng)定位布局一起使用

兼容性

摘自Can I Use中對(duì)CSS Grid的兼容性分析。

從圖中可以看出瀏覽器的兼容率整體達(dá)到84.16%，并且都是無需帶前綴的。

基本概念

網(wǎng)格是一組相交的水平線和垂直線，它定義了網(wǎng)格的列和行。我們可以將網(wǎng)格元素放置在與這些行和列相關(guān)的位置上。

Grid Container (網(wǎng)格容器)

在一個(gè)元素上應(yīng)用了display: grid;或者display: inline-grid;那么就創(chuàng)建了一個(gè)網(wǎng)格容器，它下面的直接子元素都會(huì)成為網(wǎng)格元素，例如：

  
One
  
Two
    
I have some more content in.
    
This makes me taller than 100 pixels.
    
  
  
Three
  
Four
  
Five

從網(wǎng)頁的基本表現(xiàn)看，和平常的布局沒有什么差別，Mac OSX 【alt + command + I】，Windows 【F11】打開網(wǎng)頁檢查器即可看出網(wǎng)格布局。

Grid Tracks (網(wǎng)格軌跡)

從字面上的意譯來看還是比較繞口，但是我換一種說法你可能就會(huì)明白了。可以把tracks看做是table中的行和列就好了。

定義一個(gè)網(wǎng)格中的行和列的數(shù)量分別使用grid-template-rows和grid-template-columns來確定這個(gè)表格會(huì)有多少行以及多少列。例如：

.container {
  display: grid;
  grid-template-rows: 100px 50px 100px;
  grid-template-columns: 100px 100px 100px;
}

上面的代碼寫出了一個(gè)3 x 3的網(wǎng)格

在圖中可以看出網(wǎng)格的數(shù)量，其中的子元素會(huì)根據(jù)這些網(wǎng)格的數(shù)量自動(dòng)填充。如果事先不知道要?jiǎng)澐侄嗌傩校梢允褂弥皇褂?code>grid-template-columns來確定多少列，行數(shù)會(huì)根據(jù)有多少子item來自動(dòng)計(jì)算，例如下面的：

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

5個(gè)元素如果是劃分3列，那么就應(yīng)該會(huì)有兩行。

fr

如果想要均分容器的寬度，那么可以使用新引入的單位fr，新的fr單位代表網(wǎng)格容器中可用空間的一等份。例如：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

repeat()

可以使用repeat()函數(shù)來標(biāo)記軌道重復(fù)使用的部分，例如上面的樣式就可以寫成：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

每行高度

如果想確定使用每行高度，可以使用grid-auto-rows: 100px;來確定每行只有100px

minmax()

如果想讓每行的高度隨著內(nèi)容自動(dòng)填充，那么可以使用minmax()來確定最小值與最大值，例如：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

上面的樣式規(guī)定了一個(gè)3列布局，每行的高度最少為100px的網(wǎng)格。

Grid Line (網(wǎng)格線)

網(wǎng)格線用來構(gòu)建整個(gè)網(wǎng)格，包括水平的和豎直的

當(dāng)一個(gè)網(wǎng)格被構(gòu)建出來，網(wǎng)格線就會(huì)被默認(rèn)地有一個(gè)標(biāo)識(shí)，看下圖：

標(biāo)識(shí)的線可以是正向也可以是逆向的，例如第一行的線的標(biāo)識(shí)就是[1|-4]，那么線標(biāo)識(shí)有什么用？線標(biāo)識(shí)主要用來確定一個(gè)子元素要占有的面積，也成為Grid Area，例如下面的代碼：

.one {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

給線命名

默認(rèn)的線的標(biāo)識(shí)都是用數(shù)字來表示的，當(dāng)然也可以給線來命名，具體如下：

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

從圖中可以看出，第一列的第一根線被命名成了first，那么我們就可以將之前的寫法稍微改一下了：

.one {
  grid-column-start: first;
  grid-column-end: col4-start;
  grid-row-start: 1;
  grid-row-end: 3;
}

關(guān)于更多的線的命名使用方法，可以參看Naming lines when defining a grid，這里只是簡(jiǎn)單的介紹

Grid Cell (網(wǎng)格單元)

可以簡(jiǎn)單理解為一個(gè)table中的一個(gè)單元格

Grid Area (網(wǎng)格面積)

可以通過規(guī)定一個(gè)item的起始行和起始列來規(guī)定一個(gè)area，注意：area必須為一個(gè) 規(guī)則的舉行，而不能為一個(gè)類似于L形狀的圖形

通過行和列標(biāo)識(shí)來確定一個(gè)面積，例如：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

上面的代碼就劃定了一個(gè)兩行兩列的區(qū)域，上面的寫法可以簡(jiǎn)寫為：

.one {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  
  /* 這種寫法對(duì)應(yīng)： */
  grid-column: [grid-column-start] / [grid-column-end];
  grid-row: [grid-row-start] / [grid-row-end];
}

或者使用grid-area，

.one { 
  grid-area: 1 / 1 / 3 / 3;
  
  /* 這種寫法分別對(duì)應(yīng)： */
  grid-area: [grid-row-start] / [grid-column-start] / [grid-row-end] / [grid-column-end];
}

還可以配合grid-template-areas來提前劃分區(qū)域，例如：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas: 
   "header header header"
   "siderbar main main"
   "footer footer footer"
}

上面的樣式中，規(guī)定了一個(gè)3 x 3的網(wǎng)格，并且劃分了區(qū)域，第一行為header，第二行為左側(cè)為siderbar，右側(cè)為main，第三行為footer，那么剩余的工作就是制定子元素對(duì)應(yīng)的區(qū)域即可，例如：

.header {
  grid-area: header;
}
.siderbar {
  grid-area: siderbar;    
}
.main {
  grid-area: main;    
}
.footer {
  grid-area: footer;
}

對(duì)應(yīng)的網(wǎng)頁文件為：

  
header
  
siderbar
  
main
  
footer

最終的效果為：

Grid Gutters (網(wǎng)格間距)

分為行間距和列間距，類似于table中的colspan和rowspan，具體例子如下：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
  
  /* 這里的grid-gap相當(dāng)于： */
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

從上一個(gè)例子中，我也設(shè)置了10px的間距，可以從圖中看出來。

Grid z-index

類似于position: absolute;絕對(duì)定位之后的層級(jí)，后面渲染的item會(huì)覆蓋前面的，因此下例中的item為Two的會(huì)覆蓋在One上

.z-index-1 {
  grid-column: 1 / 3;
  grid-row: 1;
  background-color: aliceblue;
}
.z-index-2 {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background-color: antiquewhite;
}

調(diào)整item1的index之后z-index: 2;，會(huì)看到item1會(huì)覆蓋在item2上面

One
Two

網(wǎng)格布局中的對(duì)齊

如果熟悉flex，那么一定會(huì)知道flex中的布局，相同的，在grid布局中也有相應(yīng)的布局

網(wǎng)格布局的兩條軸線

When working with grid layout you have two axes available to align things against – the block axis and the inline axis. The block axis is the axis upon which blocks are laid out in block layout. If you have two paragraphs on your page they display one below the other, so it is this direction we describe as the block axis.

• 塊方向的列軸

• 文字方向的行軸

以上的文字以及圖片均摘自MDN

對(duì)齊列項(xiàng)目

對(duì)齊列項(xiàng)目主要的CSS聲明有兩個(gè)：align-items以及align-self，align-items用于所有item的設(shè)置，align-self可以多帶帶進(jìn)行自定義。這兩個(gè)聲明可取的屬性值有以下幾種：

• auto
• normal
• start
• end
• center
• stretch
• baseline
• first baseline
• last baseline

下面我們用一個(gè)栗子分別說明如下(栗子摘自MDN)：

  
Item 1
  
Item 2
  
Item 3
  
Item 4

定義了一個(gè)8 x 4列的網(wǎng)格，其中劃分為均勻的四個(gè)區(qū)域，分別用item[1,2,3,4]來進(jìn)行填充，默認(rèn)的對(duì)齊方式為stretch

可以通過幾個(gè)select來控制對(duì)齊方式，分別通過控制整體和單個(gè)item的對(duì)齊

相對(duì)于容器的列對(duì)齊

使用align-content這個(gè)屬性聲明來決定整個(gè)網(wǎng)格在容器中的列方向的布局，可選的值如下：

• normal
• start
• end
• center
• stretch
• space-around
• space-between
• space-evenly
• baseline
• first baseline
• last baseline

可以看到圖中，當(dāng)選擇了align-content: end的時(shí)候，整個(gè)網(wǎng)格就會(huì)在容器的下方對(duì)齊。

更多內(nèi)容請(qǐng)參看MDN CSS_Grid_Layout

Grid 布局和其他布局的關(guān)系

Grid 和 Flex

The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time.

Grid布局和Flex布局最大的不同點(diǎn)就是：Grid布局是二維布局，針對(duì)行和列的布局，而Flex布局為一維布局，只針對(duì)行和列的當(dāng)行布局。

Tips: 這兩種布局并不沖突，可以搭配使用。可以在整體布局上采用grid布局，而細(xì)節(jié)處理可以使用flex

下面看一個(gè)栗子，來看看這兩種布局之間有什么不同（栗子來源MDN）:

編寫一個(gè)自動(dòng)換行適應(yīng)的布局

• Flex方式

  
One
 
  
Two
  
Three
  
Four
  
Five

• Grid 方式

使用flex-wrap: wrap;來限定如果一行不足就自動(dòng)換行。使用auto-fill來根據(jù)容器寬度決定會(huì)有多少列，并且使用minmax()函數(shù)來確定最小為200px，最大為容器寬度來自適應(yīng)。

如果屏幕上有很多剩余的空間，flex布局會(huì)均分成5列，而grid布局則會(huì)始終為3列，并且余下的兩個(gè)item也長(zhǎng)度也 相同，而如果屏幕寬度調(diào)整為小于200時(shí)，flex布局會(huì)彈性地變?yōu)?列，但是grid布局如果沒有使用auto-fill時(shí)，會(huì)始終為設(shè)置的列數(shù)。

另外，grid布局和flex布局還有一點(diǎn)不同的是，在最開始的分配的時(shí)候grid布局會(huì)優(yōu)先劃分布局，即會(huì)優(yōu)先規(guī)定出屏幕中可以最大容忍出 多少個(gè)符合條件（這里是最小為200px， 最大為1fr）的item數(shù)量，然后依次填充。

Grid 和 絕對(duì)定位

.positioned {
  grid-template-columns: repeat(4,1fr);
  grid-auto-rows: 200px;
  grid-gap: 20px;
  position: relative;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position: absolute;
  top: 40px;
  left: 40px;
}

如果父容器有定位標(biāo)識(shí)relative Or absolute等，那么下面的子item會(huì)根據(jù)原始它們應(yīng)該布局的位置定位，反之如果父容器沒有 定位標(biāo)識(shí)，那么應(yīng)用了position: absolute;會(huì)脫離gird布局，并且按照CSS傳統(tǒng)的方式布局。

備注：

• 文中部分圖片以及案例均來自于A Complete Guide to Grid和MDN
• 本文代碼倉(cāng)庫(kù)：https://github.com/Rynxiao/css-grid-tutorial/
• 本文部分實(shí)例：http://rynxiao.com/css-grid-tutorial/

參考連接

• MDN Css Grid Layout
• A Complete Guid to Grid