.container {
  grid-template: none | subgrid |  / ;
}

它也可以使用一個(gè)更復(fù)雜但相當(dāng)方便的語法來指定這三個(gè)值。 一個(gè)例子：

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

以上等價(jià)于：

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

由于 grid-template 不會(huì)重置隱式網(wǎng)格屬性（grid-auto-columns，grid-auto-rows和grid-auto-flow），而這可能是大多數(shù)情況下你想要做的。因此建議使用grid屬性來代替grid-template。

指定網(wǎng)格線的大小，你可以把它想象為設(shè)置列/行之間的間距的寬度。

值：

line-size - 一個(gè)長度值

.container {
  grid-column-gap: ;
  grid-row-gap: ;
}

舉例：

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

只能在列/行之間創(chuàng)建縫隙，而不是在外部邊緣創(chuàng)建。

grid-row-gap 和 grid-column-gap 的縮寫

.container {
  grid-gap:  ;
}

Example:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-gap: 10px 15px;
}

如果沒有指定 grid-row-gap，則會(huì)被設(shè)置為與 grid-column-gap 相同的值。

沿著行軸對(duì)齊網(wǎng)格內(nèi)的內(nèi)容（與之對(duì)應(yīng)的是 align-items, 即沿著列軸對(duì)齊），該值適用于容器內(nèi)的所有的 grid items。

值：

start: 內(nèi)容與網(wǎng)格區(qū)域的左端對(duì)齊

end: 內(nèi)容與網(wǎng)格區(qū)域的右端對(duì)齊

center: 內(nèi)容位于網(wǎng)格區(qū)域的中間位置

stretch: 內(nèi)容寬度占據(jù)整個(gè)網(wǎng)格區(qū)域空間(這是默認(rèn)值)

.container {
  justify-items: start | end | center | stretch;
}

舉例：

.container {
  justify-items: start;
}

.container{
  justify-items: end;
}

.container {
  justify-items: center;
}

.container {
  justify-items: stretch;
}

也可以通過給單個(gè) grid item 設(shè)置justify-self屬性來達(dá)到上述效果。

沿著列軸對(duì)齊grid item 里的內(nèi)容（與之對(duì)應(yīng)的是使用 justify-items 設(shè)置沿著行軸對(duì)齊），該值適用于容器內(nèi)的所有 grid items。

值：

start: 內(nèi)容與網(wǎng)格區(qū)域的頂端對(duì)齊

end: 內(nèi)容與網(wǎng)格區(qū)域的底部對(duì)齊

center: 內(nèi)容位于網(wǎng)格區(qū)域的垂直中心位置

stretch: 內(nèi)容高度占據(jù)整個(gè)網(wǎng)格區(qū)域空間(這是默認(rèn)值)

.container {
  align-items: start | end | center | stretch;
}

舉例:

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

也可以通過給單個(gè) grid item 設(shè)置align-self屬性來達(dá)到上述效果。

有時(shí)，網(wǎng)格的總大小可能小于其網(wǎng)格容器的大小。如果你的所有 grid items 都使用像px這樣的非彈性單位來設(shè)置大小，則可能發(fā)生這種情況。此時(shí)，你可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對(duì)齊方式。 此屬性沿著行軸對(duì)齊網(wǎng)格（與之對(duì)應(yīng)的是 align-content, 沿著列軸對(duì)齊）。

值：

start - 網(wǎng)格與網(wǎng)格容器的左邊對(duì)齊

end - 網(wǎng)格與網(wǎng)格容器的右邊對(duì)齊

center - 網(wǎng)格與網(wǎng)格容器的中間對(duì)齊

stretch - 調(diào)整g rid item 的大小，讓寬度填充整個(gè)網(wǎng)格容器

space-around - 在 grid item 之間設(shè)置均等寬度的空白間隙，其外邊緣間隙大小為中間空白間隙寬度的一半

space-between - 在 grid item 之間設(shè)置均等寬度空白間隙，其外邊緣無間隙

space-evenly - 在每個(gè) grid item 之間設(shè)置均等寬度的空白間隙，包括外邊緣

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

舉例：

.container {
  justify-content: start;
}

.container {
  justify-content: end; 
}

.container {
  justify-content: center;  
}

.container {
  justify-content: stretch; 
}

.container {
  justify-content: space-around;  
}

.container {
  justify-content: space-between; 
}

.container {
  justify-content: space-evenly;  
}

有時(shí)，網(wǎng)格的總大小可能小于其網(wǎng)格容器的大小。如果你的所有 grid items 都使用像px這樣的非彈性單位來設(shè)置大小，則可能發(fā)生這種情況。此時(shí)，你可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對(duì)齊方式。 此屬性沿著列軸對(duì)齊網(wǎng)格（與之對(duì)應(yīng)的是 justify-content, 即沿著行軸對(duì)齊）。

值：

start - 網(wǎng)格與網(wǎng)格容器的頂部對(duì)齊

end - 網(wǎng)格與網(wǎng)格容器的底部對(duì)齊

center - 網(wǎng)格與網(wǎng)格容器的中間對(duì)齊

stretch - 調(diào)整 grid item 的大小，讓高度填充整個(gè)網(wǎng)格容器

space-around - 在 grid item 之間設(shè)置均等寬度的空白間隙，其外邊緣間隙大小為中間空白間隙寬度的一半

space-between - 在 grid item 之間設(shè)置均等寬度空白間隙，其外邊緣無間隙

space-evenly - 在每個(gè) grid item 之間設(shè)置均等寬度的空白間隙，包括外邊緣

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

舉例：

.container {
  align-content: start; 
}

.container {
  align-content: end; 
}

.container {
  align-content: center;  
}

.container {
  align-content: stretch; 
}

.container {
  align-content: space-around;  
}

.container {
  align-content: space-between; 
}

.container {
  align-content: space-evenly;  
}

指定自動(dòng)生成的網(wǎng)格軌道（又名隱式網(wǎng)格軌道）的大小。 隱式網(wǎng)格軌道在你顯式的定位超出指定網(wǎng)格范圍的行或列（使用 grid-template-rows/grid-template-columns）時(shí)被創(chuàng)建。

值：

- 可以是一個(gè)長度值，一個(gè)百分比值，或者一個(gè)自由空間的一部分（使用 fr 單位）

.container {
  grid-auto-columns:  ...;
  grid-auto-rows:  ...;
}

為了說明如何創(chuàng)建隱式網(wǎng)格軌道，思考如下代碼：

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}

這里創(chuàng)建了一個(gè) 2x2的網(wǎng)格。

但是，現(xiàn)在想象一下，使用 grid-column 和 grid-row 來定位你的網(wǎng)格項(xiàng)目，如下所示：

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

這里我們指定 .item-b開始于列網(wǎng)格線 5 并結(jié)束于在列網(wǎng)格線 6，但我們并未定義列網(wǎng)格線 5 或 6。因?yàn)槲覀円貌淮嬖诘木W(wǎng)格線，寬度為0的隱式軌道的就會(huì)被創(chuàng)建用與填補(bǔ)間隙。我們可以使用 grid-auto-columns 和 grid-auto-rows屬性來指定這些隱式軌道的寬度：

.container {
  grid-auto-columns: 60px;
}

如果你存在沒有顯示指明放置在網(wǎng)格上的 grid item，則自動(dòng)放置算法會(huì)自動(dòng)放置這些項(xiàng)目。 而該屬性則用于控制自動(dòng)布局算法的工作方式。

值：

row - 告訴自動(dòng)布局算法依次填充每行，根據(jù)需要添加新行

column - 告訴自動(dòng)布局算法依次填充每列，根據(jù)需要添加新列

dense - 告訴自動(dòng)布局算法，如果后面出現(xiàn)較小的 grid item，則嘗試在網(wǎng)格中填充空洞

.container {
  grid-auto-flow: row | column | row dense | column dense
}

需要注意的是，dense 可能導(dǎo)致您的 grid item 亂序。

舉例， 考慮如下 HTML：

  
item-a
  
item-b
  
item-c
  
item-d
  
item-e

你定義一個(gè)有5列和2行的網(wǎng)格，并將 grid-auto-flow 設(shè)置為 row（這也是默認(rèn)值）：

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

當(dāng)把 grid item 放在網(wǎng)格上時(shí)，你只把其中兩個(gè)設(shè)置了固定的位置：

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

因?yàn)槲覀儗?grid-auto-flow 設(shè)置為row，所以我們的grid就像這樣。 注意觀察我們沒有做設(shè)置的三個(gè)項(xiàng)目（item-b，item-c和item-d）是如何在剩余的行水平擺放位置的：

如果我們將 grid-auto-flow 設(shè)置為 column，則 item-b，item-c 和 item-d 以列的順序上下擺放：

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}

在單個(gè)屬性中設(shè)置所有以下屬性的簡寫：grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns和grid-auto-flow。 它同時(shí)也將 sets grid-column-gap 和 grid-row-gap 設(shè)置為它們的初始值，即使它們不能被此屬性顯示設(shè)置。

值：

none - 將所有子屬性設(shè)置為其初始值

/ - 將 grid-template-rows 和 grid-template-columns 分別設(shè)置為指定值，將所有其他子屬性設(shè)置為其初始值

[ [ / ] ] - 接受所有與grid-auto-flow，grid-auto-rows和grid-auto-columns相同的值。 如果省略grid-auto-columns，則將其設(shè)置為為grid-auto-rows指定的值。 如果兩者都被省略，則它們被設(shè)置為它們的初始值

.container {
    grid: none |  /  |  [ [/ ]];
}

舉例：

以下代碼寫法等價(jià)

.container {
  grid: 200px auto / 1fr auto 1fr;
}
.container {
  grid-template-rows: 200px auto;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: none;
}

以下代碼寫法等價(jià)

.container {
  grid: column 1fr / auto;
}
.container {
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
  grid-auto-columns: auto;
}

它也可用使用一個(gè)更復(fù)雜但相當(dāng)方便的語法來一次設(shè)置所有內(nèi)容。 你可以指定 grid-template-areas、grid-template-rows 以及 grid-template-columns，并將所有其他子屬性設(shè)置為其初始值。 你現(xiàn)在所做的是在其網(wǎng)格區(qū)域內(nèi)，指定網(wǎng)格線名稱和內(nèi)聯(lián)軌道大小。 可以看下面的例子：

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

上述代碼等價(jià)于

.container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}

grid-column-start / grid-column-end / grid-row-start /grid-row-end

使用特定的網(wǎng)格線確定 grid item 在網(wǎng)格內(nèi)的位置。grid-column-start/grid-row-start 屬性表示grid item的網(wǎng)格線的起始位置，grid-column-end/grid-row-end屬性表示網(wǎng)格項(xiàng)的網(wǎng)格線的終止位置。

值：

: 可以是一個(gè)數(shù)字來指代相應(yīng)編號(hào)的網(wǎng)格線，也可使用名稱指代相應(yīng)命名的網(wǎng)格線

span : 網(wǎng)格項(xiàng)將跨越指定數(shù)量的網(wǎng)格軌道

span : 網(wǎng)格項(xiàng)將跨越一些軌道，直到碰到指定命名的網(wǎng)格線

auto: 自動(dòng)布局， 或者自動(dòng)跨越， 或者跨越一個(gè)默認(rèn)的軌道

.item {
  grid-column-start:  |  | span  | span  | auto
  grid-column-end:  |  | span  | span  | auto
  grid-row-start:  |  | span  | span  | auto
  grid-row-end:  |  | span  | span  | auto
}

舉例：

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

如果沒有聲明 grid-column-end / grid-row-end，默認(rèn)情況下，該網(wǎng)格項(xiàng)將跨越1個(gè)軌道。

網(wǎng)格項(xiàng)可以相互重疊。 您可以使用z-index來控制它們的堆疊順序。

grid-column-start + grid-column-end, 和 grid-row-start + grid-row-end 的簡寫形式。

值：

/ - 每個(gè)值的用法都和屬性分開寫時(shí)的用法一樣

.item {
  grid-column:  /  |  / span ;
  grid-row:  /  |  / span ;
}

舉例：

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

如果沒有指定結(jié)束行值，則該網(wǎng)格項(xiàng)默認(rèn)跨越1個(gè)軌道。

給 grid item 進(jìn)行命名以便于使用 grid-template-areas 屬性創(chuàng)建模板時(shí)來進(jìn)行引用。另外也可以做為 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的簡寫形式。

值：

- 你的命名

/ / / - 可以是數(shù)字，也可以是網(wǎng)格線的名字

.item {
  grid-area:  |  /  /  / ;
}

舉例:

給一個(gè)網(wǎng)格項(xiàng)命名

.item-d {
  grid-area: header
}

作為 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的簡寫:

.item-d {
  grid-area: 1 / col4-start / last-line / 6
}

沿著行軸對(duì)齊grid item 里的內(nèi)容（與之對(duì)應(yīng)的是 align-self, 即沿列軸對(duì)齊）。 此屬性對(duì)單個(gè)網(wǎng)格項(xiàng)內(nèi)的內(nèi)容生效。

值：

start - 將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的左端

end - 將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的右端

center - 將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間

stretch - 填充網(wǎng)格區(qū)域的寬度 (這是默認(rèn)值)

舉例：

.item-a {
  justify-self: start;
}

.item-a {
  justify-self: end;
}

.item-a {
  justify-self: center;
}

.item-a {
  justify-self: stretch;
}

要為網(wǎng)格中的所有g(shù)rid items 設(shè)置對(duì)齊方式，也可以通過 justify-items 屬性在網(wǎng)格容器上設(shè)置此行為。

沿著列軸對(duì)齊grid item 里的內(nèi)容（與之對(duì)應(yīng)的是 justify-self, 即沿行軸對(duì)齊）。 此屬性對(duì)單個(gè)網(wǎng)格項(xiàng)內(nèi)的內(nèi)容生效。

值：

start - 將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的頂部

end - 將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的底部

center - 將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間

stretch - 填充網(wǎng)格區(qū)域的高度 (這是默認(rèn)值)

.item {
  align-self: start | end | center | stretch;
}

舉例:

.item-a {
  align-self: start;
}

.item-a {
  align-self: end;
}

.item-a {
  align-self: center;
}

.item-a {
  align-self: stretch;
}

要為網(wǎng)格中的所有g(shù)rid items 統(tǒng)一設(shè)置對(duì)齊方式，也可以通過 align-items 屬性在網(wǎng)格容器上設(shè)置此行為。

加微信號(hào): astak10或者長按識(shí)別下方二維碼進(jìn)入前端技術(shù)交流群 ，暗號(hào)：寫代碼啦

每日一題，每周資源推薦，精彩博客推薦，工作、筆試、面試經(jīng)驗(yàn)交流解答，免費(fèi)直播課，群友輕分享... ，數(shù)不盡的福利免費(fèi)送