馬蹄疾 | 2019年，是時候認真學一波 Grid 佈局了

上週，我寫的 Flex專題 被阮一峯的「每週分享第 48 期」收錄，而後 倉庫 就登上了子類的 GitHub Trending (流量太可怕了😅)。

這一次是Flex專題的姊妹篇Grid專題。正巧昨天阮一峯也發佈了 Grid 佈局教程，你們能夠切換着看吶 (我以爲個人寫得更好，不接受反駁🤔)。

本文是『horseshoe·Grid專題』系列文章之一，後續會有更多專題推出

GitHub地址(持續更新)：horseshoe

博客地址(文章排版真的很漂亮)：matiji.cn

若是以爲對你有幫助，歡迎來 GitHub 點 Star 或者來個人博客親口告訴我

Grid Layout叫柵格佈局模型，由於幾乎每個成熟的CSS框架都會實現本身的柵格佈局系統，因此W3C乾脆弄了一套CSS原生的柵格佈局系統，補足這方面的短板。

有那麼一段時間，網頁佈局是表格的天下。用表格佈局雖然怪怪的，可是表格有它本身的優點。流式佈局只能一個一個元素往頁面底部流動，它的表達能力是有限的；而表格把頁面切成若干豆腐塊，能從容調配每一塊豆腐，佈局表達能力秒殺流。然而表格畢竟是表格，它有一些特性是專門爲製做表格準備的，因此也就逐漸式微了。

柵格佈局系統，能夠理解爲更加通用、更增強大的表格佈局系統。它也是把頁面切成若干豆腐塊，元素能夠自由聲明佔用哪一個豆腐塊。W3C還爲Grid Layout增長了好多專用的屬性、語法和計算函數，能夠說，這一次是奔着一勞永逸來的。

二維佈局模型

咱們以前講過Flexbox屬於一維佈局模型，詳情見：Flex專題。

這個專題要講的Grid Layout則屬於二維佈局模型。

當咱們的視角確立之後，所謂的一維就是隻有行，而所謂的二維就是有行也有列。很好理解，既然是柵格嘛，那必須得行列相交才能肯定一個格子的大小。

概念

由於Grid Layout是二維佈局模型，它乾脆就固定了行與列的方向。格子嘛，任何橫着放的佈局方式均可以用豎着放的佈局方式實現，反之亦然。因此自定義主軸的方向意義不大，因而乎Grid Layout也就沒有主軸和交叉軸的概念。

Grid Layout惟一涉及到自定義方向的屬性是grid-auto-flow，它的意思是當格子沒有顯式聲明位置的時候，排列順序的方向如何肯定，是按列排呢仍是按行排。這個屬性後面會細講。

容器與項目

Grid Layout有柵格容器(grid container)，它負責劃分領地，容器以內的元素纔會臣服於柵格模型；Grid Layout也有柵格項目(grid item)，它們是須要被柵格模型約束的對象。

柵格線

柵格線能夠理解爲柵格的邊框，水平和垂直的柵格線交叉造成了柵格單元。柵格線有什麼做用呢？有些柵格項目可能不止佔用一個柵格單元，聲明的時候就能夠說我從第幾條柵格線開始，到第幾條柵格線結束，這塊區域是老子的。

你能夠爲柵格線命名。

柵格單元

四條柵格線合圍成的最小區域就是柵格單元。它就是咱們常說的格子。

須要特別區分柵格單元與柵格項目。

把柵格模型類比成養豬場的話，柵格單元就是豬圈，柵格項目就是豬。可是這裏的豬比較金貴，一個豬圈最多隻能養一頭豬。就是一個蘿蔔一個坑吧。

但有些豬比較肥，或者比較霸道，它可能佔用不止一個豬圈。

柵格單元是格子，柵格項目是元素，有時候一個元素只須要一個格子約束它，有時候一個元素須要多個格子約束它。

編外柵格單元

柵格單元的數量是須要顯式聲明的。若是柵格項目的數量超過了聲明的柵格單元的數量，Grid Layout就會自動建立若干柵格單元來包裹那些超出的柵格項目。

咱們稱它爲編外柵格單元。

編外柵格單元有本身的特性，能夠經過grid-auto-columns、grid-auto-rows和grid-auto-flow自定義。

柵格系統

柵格系統就是柵格單元的總和。

柵格系統和柵格容器不是一個概念，正如柵格單元和柵格項目不是一個概念同樣。

柵格系統有可能溢出柵格容器，也可能偏居柵格容器的一隅，也可能充滿柵格容器。

柵格軌道

仍是回到二維佈局模型，雖然咱們說它有行也有列，但區分行與列的收益並不大，因此就統一叫它們柵格軌道。

兩條相鄰的柵格線與柵格容器合圍成的區域就是柵格軌道。

柵格區域

任意四條柵格線合圍成的區域均可以成爲柵格區域。當一個元素須要多個格子約束它的時候，咱們說這個元素須要一個柵格區域約束它。

柵格區域能夠由一個柵格單元組成，也能夠有若干個柵格單元組成，但它必須是一個長方體。

或者說，你用兩條水平線和兩條垂直線組成一個非長方體給我看看？

柵格區域最終是要被柵格項目使用的。你能夠給柵格區域命名，柵格項目用名字聲明區域，或者柵格項目直接用四條柵格線肯定一個區域。

display

從這裏開始，咱們就要講具體的CSS屬性了。

這個屬性聲明的是柵格容器的類型。

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

前兩個屬性值的區別在於容器自身應該表現爲塊元素仍是行內元素。第三個屬性值屬於CSS Grid Level 2規範，目前(2019年3月)還在草案階段，按下不表。

grid-template-[columns|rows]

這兩個屬性聲明的是柵格軌道的數量以及寬度。

當你聲明瞭四個寬度值，那在這個方向上就有四條軌道，它們的寬度是你聲明的值。

你也能夠在聲明柵格軌道的同時聲明柵格線的名稱。順序就是它們的物理順序。

.container {
    grid-template-columns: <length> <length> | <line-name> <length> <line-name> <length> <line-name>;
    grid-template-rows: <length> <length> | <line-name> <length> <line-name> <length> <line-name>;
}
複製代碼

任何適用於width的值都適用於這裏。

auto

若是某條柵格軌道的值是auto，默認狀況下該柵格軌道會充滿柵格容器的富餘空間。

.container {
    display: grid;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
}
.item.b {
    width: 100px;
}
複製代碼

可是若是聲明瞭justify-content(後面會講到)不爲stretch，那auto會表現爲以柵格項目的長度爲準。

.container {
    display: grid;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
    justify-content: start;
}
.item.b {
    width: 50px;
}
複製代碼

這不難理解。類比一下，普通的塊級元素會佔滿行內的富餘空間，絕對定位後的塊級元素會以自身或者子元素的寬度爲寬度。auto在這裏的表現是同樣的。

fr

fr是fraction的縮寫，翻譯成中文是分數，多少分之一的分數。它是Grid Layout專用的長度單位。

它的計算公式是這樣的，首先減去非fr單位的長度，以富餘空間爲總長度，以聲明的fr數量總和爲分母，以自身聲明的fr數量爲分子，求得自身所佔的長度。

.container {
    display: grid;
    grid-template-columns: 100px repeat(2, 1fr);
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
}
複製代碼

爲何W3C要增長一個這樣的單位呢？不是有%麼？

答案就在富餘空間上。fr也是一種百分比，可是它能保證總長度不會超過柵格容器的長度，由於它瓜分的是富餘空間的長度；而%瓜分的是柵格容器的長度，無論別人瓦上霜。

好比說像上面的例子，用%可得好好算算，用fr就簡單多了。

minmax()

minmax()是Grid Layout專用的計算函數。

.container {
    display: grid;
    grid-template-columns: minmax(100px, 200px) 300px 300px;
}
複製代碼

它有兩個參數，分別是最小值和最大值。當柵格單元須要壓縮時，最小值就是柵格項目被壓縮的最小極限，當柵格單元有剩餘空間時，最大值就是柵格項目擴張的最大極限。

它還有幾個值須要特別提一下。

• max-content：它的值是柵格項目中的文字不換行的天然長度。
• min-content：它的值是柵格項目中的文字所有換行的天然長度。
• auto：它的值根據所處的場景介於min-content和max-content之間。

fit-content()

fit-content()也是Grid Layout專用的計算函數。

它接受一個長度單位的參數。

.container {
    display: grid;
    grid-template-columns: repeat(3, fit-content(200px));
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
}
複製代碼

咱們已經瞭解過min-content和max-content。

fit-content()計算公式形象的講，最小值是內容的min-content，最大值則取參數和max-content更小的那個。好比上面的例子，當內容小於200px時，之內容爲長度，當內容大於200px時，以200px爲長度。

repeat()

repeat()是Grid Layout專用的重複函數。

它接受兩個參數，第一個參數是重複的次數，第二個參數是柵格軌道的寬度。

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
}
複製代碼

第二個參數不只僅能夠是寬度，它能夠是一種模式。好比說[col-start] 100px [col-end] auto，它會重複這一整段若干遍，而中括號包圍的是給柵格線命名。

如此這般，第1、3、五條柵格線叫col-start，第2、4、六條柵格線叫col-end。總之用repeat函數命名柵格線會有不少重複的名字。

除此以外，第二個參數還能夠是minmax函數、fit-content函數，或者min-content、max-content、auto關鍵字。

.container {
    display: grid;
    grid-template-columns: repeat(3, [col-start] 100px [col-end] auto);
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
}
複製代碼

第一個參數也有兩個關鍵字auto-fill和auto-fit。

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
}
複製代碼

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
}
複製代碼

稍微講解一下。

auto-fill和auto-fit的共同點在於它們會保證柵格系統不溢出柵格容器。由於若是你寫死了重複多少個，柵格容器空間不夠的話只能溢出了。

而不一樣點在於，auto-fill會生成儘量多的柵格軌道，即使這些軌道看起來沒什麼用；auto-fit則會生成儘量少的柵格軌道，以便讓那些自適應的柵格單元儘量佔用更多空間。

因此區別在於，auto-fill想讓柵格軌道盡量多，auto-fit想讓柵格單元儘量大。

這兩個屬性是Grid Layout自適應佈局的利器，連媒體查詢都省了。

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
複製代碼

這裏的意思是說，自適應佈局，每一個柵格項目長度等分，但最小不低於300px。那最大怎麼肯定呢？600px到900px之間，一行只能放兩個項目，一旦超過900px，一行就會放三個項目。

grid-template-areas

這個屬性給柵格單元命名，同名的柵格單元自動成爲一個柵格區域。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        'header header header'
        'sidebar main main'
        'footer footer footer';
}
複製代碼

命名以後有什麼用呢？柵格項目有一個grid-area屬性，它來瓜分柵格區域。

.item {
    grid-area: header;
}
複製代碼

這個意思是說，名字叫header的柵格區域都是個人，撒尿爲證。

必須保證格式

用grid-template-columns和grid-template-rows聲明瞭多少個柵格單元，命名的時候須要名字與柵格單元一一對應起來。而且前面說過柵格區域必須是長方體，連續命名的時候也要注意這點。

我偏不一一對應呢？好比橫向上有三個柵格單元，但我只聲明兩個名字。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        'header header';
}
複製代碼

或者我偏不湊一個長方體呢？好比第一行兩個main，第二行三個main。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 50px);
    grid-template-areas:
        'main main avatar'
        'main main main';
}
.item.a {
    grid-area: main;
}
複製代碼

格式不對的話，結果都是同樣的。全部聲明瞭grid-area的項目都會在右下角的某個編外柵格單元內，重疊在一塊兒，尚不清楚它的算法或機制是怎樣的。

其實第二種狀況，徹底能夠認爲兩列四個main組成一個區域，另外一個main組成另外一個區域，是吧？可是你想一想，如今有兩個叫main的區域，項目瓜分的時候很尷尬呀，有一塊飛地。格式仍是不對。

因此呀，語法就是這麼嚴格，老老實實遵照。

缺省名字

既然語法這麼嚴格，你要知道，取名字是一件腦袋疼的事情啊。我明明只須要給一小塊區域取名字，你非得讓我取滿。有沒有什麼省事的辦法呢？

固然有。不知道叫什麼的時候就用.代替。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        'main main sidebar'
        'main main .';
}
複製代碼

不只如此，只要沒有空格分開，n個.都只佔一個柵格單元。

grid-template-areas還有一個屬性值none。一開始我覺得打開方式是這樣的：

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        'main main sidebar'
        'main main none';
}
複製代碼

結果我其實聲明瞭一個叫作none的柵格區域。none是grid-template-areas的默認值，實際打開方式是這樣的：

.container {
    grid-template-areas: none;
}
複製代碼

也就是說，別管它。

相關隱式聲明

每個柵格區域都由四條柵格線包裹，這四條線同時會被隱式的賦予名稱。橫向上分別是xxx-start和xxx-end，縱向上也是xxx-start和xxx-end。反正柵格線名字不怕多，它只怕黑，由於它是黑怕歌手。

同時呢，反過來也是成立的。

.container {
    display: grid;
    grid-template-columns: [biu-start] 1fr [nothing] 1fr [biu-end] 1fr [nothing];
    grid-template-rows: [biu-start] 1fr [nothing] 1fr [biu-end];
}
複製代碼

上面會隱式的聲明一個叫作biu的柵格區域。並且發現了沒有，柵格區域不能夠重名，可是能夠重疊。

grid-[column|row]-gap

這個屬性聲明的是柵格單元之間的空隙。

.container {
    grid-column-gap: <length>;
    grid-row-gap: <length>;
}
複製代碼

這裏的值能夠是任何定義width的值。

能夠看到，若是將grid-column-gap設爲80%，它的意思就是gap佔柵格容器的80%，全部柵格單元只能分剩下的20%。

若是將grid-column-gap設爲100%或超過100%呢？柵格單元的寬度不必定是0，由於在Flex專題中咱們講過，margin、border和padding是很剛的，只要你定義了，flex或者grid徹底沒法壓縮它們。

特別須要注意的是，grid-[column|row]-gap沒法使用fr單位的值。

配角戲份就不要太多了吧。

grid-gap

這是一個集合屬性，能夠同時聲明grid-column-gap和grid-row-gap。

.container {
    grid-gap: <grid-column-gap> <grid-row-gap>;
}
複製代碼

justify-items

這個屬性聲明的是柵格單元相對於垂直柵格線的對齊方式。

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

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
    justify-items: center;
}
複製代碼

當柵格單元的總寬度大於柵格容器的寬度時，垂直柵格線會被撐開，也就不存在對齊了。

因此這個屬性只有在柵格單元的總寬度小於柵格容器的寬度時才生效。

Flexbox的相似屬性值有flex-start和flex-end，W3C終於在grid上把前綴去掉了。

align-items

這個屬性聲明的是柵格單元相對於水平柵格線的對齊方式。

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

place-items

這是一個集合屬性，能夠同時聲明align-items和justify-items。

若是省略第二個參數，則第二個參數會採用第一個值。

.container {
    place-items: <align-items> <justify-items>;
}
複製代碼

justify-content

這個屬性聲明的是柵格系統相對於柵格容器的水平對齊方式。

.container {
    justify-content: start(default) | end | center | stretch | space-around | space-between | space-evenly;
}
複製代碼

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
    justify-content: center;
}
複製代碼

若是柵格單元聲明的寬度都是非auto的值，那justify-content的默認值是start，也就是左對齊。這時候stretch是不起做用的。

若是有柵格單元的寬度值是auto，那它默認就是stretch，因而整個柵格系統也變成stretch。固然你能夠將justify-content設置成別的值，這時候寬度值是auto的柵格單元就以子元素的寬度爲寬度了。

因此我沒明白justify-content: stretch的做用是什麼。惟一的使用場景是樣式覆蓋的時候。

align-content

這個屬性聲明的是柵格系統相對於柵格容器的垂直對齊方式。

.container {
    align-content: start(default) | end | center | stretch | space-around | space-between | space-evenly;
}
複製代碼

這裏關於stretch的處理是同樣的。

place-content

這是一個集合屬性，能夠同時聲明align-content和justify-content。

若是省略第二個參數，則第二個參數會採用第一個值。

.container {
    place-content: <align-content> <justify-content>;
}
複製代碼

grid-auto-[columns|rows]

這兩個屬性聲明的是編外柵格單元的高度和寬度。

.container {
    grid-auto-columns: <length> <length> <length>;
    grid-auto-rows: <length> <length> <length>;
}
複製代碼

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
    grid-auto-rows: 100px;
    height: 300px;
}
複製代碼

編外柵格單元的寬度默認值都是auto。也就是說，以寬度舉例，若是柵格容器的寬度大於柵格系統的寬度，那編外柵格單元會平分富餘空間的寬度，不然編外柵格單元就之內容的寬度爲寬度了。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
    height: 300px;
}
複製代碼

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
    height: 110px;
}
複製代碼

grid-auto-flow

這個屬性聲明的是若是柵格項目沒有明確指定在柵格容器中的位置時，柵格項目應該如何依次排列。

關於什麼叫明確指定位置，柵格項目自身有一些屬性，能夠聲明它佔據的區域從哪條柵格線開始，到哪條柵格線結束，或者直接聲明佔據哪一個柵格區域。這裏按下不表，後面會講到。

這個屬性有點像Flexbox的flex-direction屬性。

.container {
    grid-auto-flow: row(default) | column | dense | row dense | column dense;
}
複製代碼

顧名思義，row就是按行排列，column就是按列排列。

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
    grid-auto-flow: row;
}
複製代碼

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
    grid-auto-flow: column;
}
複製代碼

重點要談談的是dense這個屬性值。dense翻譯成中文是稠密的意思，它的做用是當排在前面的柵格項目因爲某些緣由(主要是明確指定了位置，可是又沒有佔滿)空出了一些位置，後面的項目若是合身的話應不該該擠進去。

這麼幹的後果就是沒有明確指定位置的柵格項目可能不按順序排列。

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
}
.item.c {
    grid-column-start: 2;
}
複製代碼

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
    grid-gap: 10px;
    grid-auto-flow: dense;
}
.item.c {
    grid-column-start: 2;
}
複製代碼

grid

這是一個集合屬性，它能夠聲明兩大類屬性中任一類的全部屬性值。

.container {
    grid: <grid-template-rows> / <grid-template-columns>;
    grid: <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}
複製代碼

以長度開頭的值聲明的就是第一類，以row、column或dense開頭的值聲明的則是第二類。

以當前Grid Layout的普及程度來看，儘可能不要這麼寫，你寫的費勁，別人看的費勁。

grid-[column|row]-[start|end]

從這裏開始，涉及到的屬性都是柵格項目自身的屬性。

這個屬性聲明的是指定柵格項目從哪裏開始到哪裏結束。

.item {
    grid-column-start: auto(default) | <number> | <name> | span <number> | span <name>;
    grid-column-end: auto(default) | <number> | <name> | span <number> | span <name>;
    grid-row-start: auto(default) | <number> | <name> | span <number> | span <name>;
    grid-row-end: auto(default) | <number> | <name> | span <number> | span <name>;
}
複製代碼

start並不必定要比end靠前，靠後的話，開始到結束的方向就相反了。好比下面兩段代碼指定的區域是同樣的。

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

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

咱們來挨個講解各屬性值：

• auto指的是隻佔用一個柵格單元。不管從哪開始，從哪結束，只要有一個auto值，它就只佔一個柵格單元。

• number指的是柵格線的順序，從1開始。

• name指的是柵格線的名稱。柵格線的名稱能夠從兩個地方來，第一是經過grid-template-[columns|rows]顯示聲明，第二是定義grid-template-areas的同時會爲合圍的柵格線自動生成xxx-start和xxx-end的名稱。

• span <number>指的是跨度爲幾。這裏的數字再也不是第幾條柵格線，而是跨越幾條几條柵格線。

• span <name>指的是跨越到該名稱的柵格線爲止。它和僅僅是name有什麼區別呢？若是start比end靠後，僅僅是name的狀況會像前面說的同樣，開始到結束的方向就相反；而span <name>的狀況則會一直日後找，畢竟找不到嘛，因此就跨越到最後一條柵格線。其中的區別在於愣頭青的程度對不對？

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
    grid-template-areas:
        'a b c'
        'd e f';
    grid-gap: 10px;
}
.item.c {
    grid-column-start: c-start;
    grid-column-end: a-start;
}
複製代碼

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
    grid-template-areas:
        'a b c'
        'd e f';
    grid-gap: 10px;
}
.item.c {
    grid-column-start: c-start;
    grid-column-end: span a-start;
}
複製代碼

grid-[column|row]

這是兩個集合屬性，它們能夠同時聲明在某個方向開始和結束的位置。

.item {
    grid-column: <start> / <end>;
    grid-row: <start> / <end>;
}
複製代碼

grid-area

這個屬性聲明的是柵格項目佔據哪一個柵格區域。

.item{
    grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
複製代碼

前面介紹過grid-template-areas屬性，它聲明的柵格區域就能夠被柵格項目使用了。

固然你也可使用柵格線的方式來合圍一個柵格區域，因此它也至關於grid-[column|row]-[start|end]的終極集合屬性。要特別注意聲明的順序。

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
    grid-template-areas:
        'a b c'
        'd e f';
    grid-gap: 10px;
}
.item.c {
    grid-area: a; /* 或者 grid-area: 1 / 1 / 2 / 2; */
}
複製代碼

justify-self

這個屬性聲明的是柵格項目的長度若是小於柵格單元的長度，柵格項目如何水平對齊。

經過它能夠聲明該柵格項目自身的水平對齊方式，甚至能夠覆蓋柵格容器justify-items的值。

.item {
    justify-self: stretch(default) | start | end | center;
}
複製代碼

align-self

這個屬性聲明的是柵格項目的高度若是小於柵格單元的高度，柵格項目如何垂直對齊。

經過它能夠聲明該柵格項目自身的垂直對齊方式，甚至能夠覆蓋柵格容器align-items的值。

.item {
    align-self: stretch(default) | start | end | center;
}
複製代碼

place-self

這是一個集合屬性，能夠同時聲明align-self和justify-self。

若是省略第二個參數，則第二個參數會採用第一個值。

.item {
    place-self: <align-self> <justify-self>;
}
複製代碼

其餘

有一個小遊戲 Grid Garden 能夠幫助你輕鬆的實踐Grid Layout的各項特性。

還有一個網站 GridByExample，號稱全部你須要知道的Grid Layout知識都在這裏。

本文是『horseshoe·Grid專題』系列文章之一，後續會有更多專題推出

GitHub地址(持續更新)：horseshoe

博客地址(文章排版真的很漂亮)：matiji.cn

若是以爲對你有幫助，歡迎來 GitHub 點 Star 或者來個人博客親口告訴我