哈？原來css網格佈局這麼簡單！！！

前言

在你確認css網格佈局真的很簡單以前，你確定要知道css的那些基礎知識，好比選擇器，屬性等，一言概之，你得知道css怎麼用。（轉載請註明出處---掘金果醬淋）

開篇

css屬性大多屬性名就已經說明它自己是什麼做用了，而你要記住的只不過是相應的值會有什麼效果。然而，英文意思翻譯過來有時會對理解其做用形成干擾，於是這裏列舉一些可能會如此的詞出來，解釋其含義。當你困惑時可回來印證。

1. 「wrap」：包，纏繞

好比：這個詞出如今white-space：wrap | nowrap; 粗淺的理解：當文本內容超過容器盒子時，要不要換行。你可能困惑：包和纏繞怎麼也跟換行聯繫不到一塊兒啊。這是由於wrap的主語是「容器盒子」，即容器盒子要不要包住文本。而換行的主語是文本，容器盒子若是要求包住，那文本只能爲了達到要求而進行換行。下面將會屢次出現該詞。

2. 「content」：內容

劍橋詞典：「the articles or parts contained in a magazine or book, with the number of the page they begin on」--英文解釋起來反而make sense（實用、有實效）。也就是說：這個內容是複數的，有多個的。瞭解過Flex佈局的，最常見的仍是justify-content和align-content。這裏你先記住一個重點就夠了：複數，也就是多個的。

3. 「item」：項目

劍橋詞典：「one of several subjects to be considered」。這裏我想強調的點是這個詞是單數的，這裏與content對比下。而你常見的應該是align-items（多了個「s」）。

4. 「justify」和「align」

這兩個詞比較難以「make sense」，你且直接記住，justify表明主軸，align表明交叉軸（副軸）。

正文：網格佈局挺簡單吶！

首先，要造成網格佈局，須要一個容器盒子，而後裏面就是一個一個的格子，格子之間還有間隙。所以，相關的屬性能夠分爲兩組：設置在容器盒子的屬性，設置在格子的屬性。

1. 總綱領

1.1 設置在容器盒子的屬性。

display: grid | inline-grid 一個網格的誕生

😊	行列	間隔	伸縮	扎堆
列	grid-template-columns	grid-column-gap	justify-items	justify-content
行	grid-template-rows	grid-row-gap	align-items	align-content
簡寫	grid-template	grid-gap	place-items	place-content

😁	備胎	流
列	grid-auto-rows	grid-auto-flow
行	grid-auto-columns

1.2 設置在格子的屬性。

😆	定位開始	定位結束	簡寫
列	grid-column-start	grid-column-end	grid-column
行	grid-row-start	grid-row-end	grid-row

😘	特立獨行
列	align-self
行	justify-self
簡寫	place-self

1.3 父子組合

💕	父盒子	子格子
屬性	grid-template-areas	grid-area

你先別被嚇到，上面看起來不少的屬性，其實不少是cp 或者是簡寫，總之你很容易記住。

---

2. 各個擊破。

先從容器盒子的屬性開始。display: grid | inline-grid;就不用說了，一個網格佈局誕生的前提。

2.1 行列

grid-template-columns、grid-template-rows 、grid-template。 這一組挺好理解，grid-template-columns、grid-template-rows列和行分別多少，grid-template將行列簡寫。

上代碼

<div class="container">
        <h1>Grid Layout</h1>
        <div class="grid-container">
            <div class="item1">item1</div>
            <div class="item2">item2</div>
            <div class="item3">item3</div>
            <div class="item4">item4</div>
            <div class="item5">item5</div>
            <div class="item6">item6</div>
            <div class="item7">item7</div>
            <div class="item8">item8</div>
            <div class="item9">item9</div>
        </div>
    </div>
複製代碼

.grid-container {
    display: grid;
    grid-template-rows: 33.33% 33.33% 33.33%;
    grid-template-columns: 33.33% 33.33% 33.33%; 
}
複製代碼

效果

完整代碼及動手嘗試點這裏

   拓展：

• grid-template-columns: 33.33% 33.33% 33.33%; 能夠換一個寫法：grid-template-columns: repeat(3, 33.33%); 多簡單！第一個參數表明重複的次數，而第二個參數就是被重複的對象。grid-template-rows同理。
• fr 是 fraction的縮寫，表示「片斷、分數」。你直接理解爲一個佔比的單位。grid-template-columns: 33.33% 33.33% 33.33%;能夠寫成grid-template-columns: 1fr 1fr 1fr;或者template-columns: repeat(3, 1fr)。（除了百分比，fr，值還能夠是具體的像素距離如100px、auto、minmax()…本身試試）。
• repeat(arg1, model)的第一個參數還能夠是auto-fill，表示」重複多少次看狀況，塞滿就行」。

2.2 間隔

grid-column-gap、grid-row-gap、grid-gap。這一組也很好理解。gap表示間隔，前兩個的值是20px等表示距離的值。

上代碼

.grid-container {
    display: grid;
    grid-template-rows: 33.33% 33.33% 33.33%;
    grid-template-columns: 33.33% 33.33% 33.33%; 
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
複製代碼

效果

完整代碼及動手嘗試點這裏

   拓展：

• 咱們加上gap以後，發現內容超出了盒子，也間接知道了：gap不包含在用百分比分割的格子裏面，長度本身算本身的。

grid-gap: <grid-row-gap> <grid-column-gap>;簡寫

2.3 伸縮

justify-items、align-items、place-items。這一組很好說，前面解釋過item，它是單數，而後加上「s」. 我之因此強調這一點，是由於以下效果。

上代碼

.grid-container {
    display: grid;
    grid-template-rows: 33.33% 33.33% 33.33%;
    grid-template-columns: 33.33% 33.33% 33.33%; 
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-items: center;
    align-items: center;
}
複製代碼

效果

完整代碼及動手嘗試點這裏

分析助記：首先咱們要知道其有四個值：stretch | start | end | center;而其效果是：

• 對一個格子裏面的佈局進行拉伸收縮，且無論如何都不會超出原來的格子範圍，這對應item單數；
• 根據item前面是justify或align，控制主軸或副軸，讓每個都重複單個格子的伸縮，這都應了item後面的「s」。

place-items: <align-items> / <justify-items>;簡寫。

2.4 扎堆

justify-content、align-content、place-content。這一組與前面2.3討論的對應，也簡單。首先justify-content、align-content都有七個值start | end | center | stretch | space-around | space-between | space-evenly;對應有什麼效果我只寫一個，其餘你本身玩一下就懂了，我後面的分析纔是重點。

上代碼

.grid-container {
    display: grid;
    grid-template-rows: 25% 25% 25%;
    grid-template-columns: 25% 25% 25%; 
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-content: start;
    align-content: end;
}
複製代碼

效果

完整代碼及動手嘗試點這裏

分析助記：還記得前面說過嗎，content是複數，與2.3的item對立，因此其效果也是「人如其名」，它控制的是主軸或副軸方向的多個格子的拉伸收縮，注意這裏要把多個格子當作一個總體。（PS：格子+間隔gap的寬度要<容器寬度纔有效果）

place-content: <align-content> / <justify-content>;依舊簡寫。

2.5 備胎

grid-auto-columns、grid-auto-rows。這組屬性，若是你理解了前面grid-template-columns/rows, 那麼這組屬性也很好理解。你理解爲他們的「備胎」就行，也就是說，當某一個格子被本身的屬性「定位」到容器盒子以外的地方時，你提早設定的「備胎」行列就發揮做用了。

上代碼

.grid-container {
    display: grid;
    grid-template-rows: 25% 25% 25%;
    grid-template-columns: 25% 25% 25%; 
    grid-auto-columns: 10%;
}
.item3 {
    grid-column-start:4;
}
複製代碼

效果

完整代碼及動手嘗試點這裏

分析助記：其中控制格子item3定位到容器格子外後面講解，你只要關心設定的「備胎」列寬度爲10%，因此item3「出軌」的列就只要10%。grid-auto-rows同理。 這兩個卻是沒有簡寫。

2.6 流

grid-auto-flow。這個屬性的重點字眼是flow，即「流」。有值： grid-auto-flow: row | column | row dense | column dense。前兩個好理解，就是流的方向，那後面又分別加了dense，意思「緊密，使緊密」。能否理解爲流中的排列更加緊密？

且看代碼

.grid-container {
    display: grid;
    grid-template-rows: 25% 25% 25%;
    grid-template-columns: 25% 25% 25%; 
    grid-auto-rows: 25%;
    grid-auto-flow: row;
}
.item1 {
    grid-column-start:1;   
    grid-column-end:3;

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

效果

上面代碼讓第一個格子和第二個格子各佔據2各格子的寬度（後面講解），你關注默認的流動。 完整代碼及動手嘗試點這裏

加了dense呢？

.grid-container {
    grid-auto-flow: row dense;
}
複製代碼

效果

完整代碼及動手嘗試點這裏

分析助記：蠻簡單，就是流動方向控制，沒有dense就「鬆」的「流」動，會留下空格；加dense會填滿多餘空格。

到這裏，其實你已經把容器盒子的grid屬性看完了：說白了就六個「東西」：

• 控制幾行幾列的grid-template-columns/rows。
• -控制格子間隔的grid-row/column-gap。
• 單個格子裏面的拉伸收縮方式align/justify-items。
• 主軸或副軸方向的多個格子的總體的拉伸收縮方式align/justify-content。這樣看來，是否是就清晰明瞭啦。
• 備胎grid-auto-columns/rows。
• 流動方向及鬆緊grid-auto-flow。So easy!

grid以上全部屬性簡寫，這裏不建議初學者用，等有css優化需求再嘗試用。

---

接下來講一下單個格子本身的屬性，就更加簡單吶。

2.7 定位

grid-column-start、grid-column-end、grid-row-start、grid-row-end、grid-column、grid-row 這一組就很直接了，start和end，開始和結束，又是應用在格子上面，那就很「make sense」了，意思就是格子開始和結束的位置，接着其值是數字，若是咱們這樣描述一個格子：格子從第1個*開始，到第3個*結束。那盒子容器裏面有什麼可以做爲*的表明呢？不就是網格線麼？至於主軸和副軸還有簡寫就無須贅述啦~

再上代碼

.grid-container {
    display: grid;
    grid-template-rows: 25% 25% 25%;
    grid-template-columns: 25% 25% 25%; 
    grid-auto-rows: 25%;
}
.item1 {
    grid-column-start:1;   
    grid-column-end:3;
}
.item2 {
    grid-column-start:1;   
    grid-column-end:3;
}
複製代碼

效果

完整代碼及動手嘗試點這裏

2.8 特立獨行

justify-self、align-self、place-self。這是格子的最後一組屬性啦。self單詞意思你們都懂：本身。首先本身是單數的，其次，本身-本身說了算。前面咱們提到的容器盒子align-items，他就是對格子發出拉伸收縮的指令，且帶「s」,對一羣格子施令。而總有那麼一兩個不聽，想本身說了算。至於主軸和副軸還有簡寫就無須贅述啦！

看代碼

.grid-container {
    display: grid;
    grid-template-rows: 25% 25% 25%;
    grid-template-columns: 25% 25% 25%; 
    justify-items: center;
}
.item5 {
    justify-self: start;
}
複製代碼

效果

完整代碼及動手嘗試點這裏

到這裏，格子上單獨本身設置的屬性就沒啦，也就兩組：第一組就是給格子定位的start 和end，以網格線爲參照；第二組就是特立獨行的self。So easy, right ?

---

3. 父子CP

還有最後一組，這一組與上面的不一樣，不是單獨設置就能生效的，要容器盒子和格子配合纔有效果。可是，簡單得有點尷尬。CP（組合使用）grid-template-areas（父）、grid-area（子）。打個比方：諸侯分封，土地各自屬於哪一個諸侯。 上代碼

<div class="container">
        <h1>Grid Layout</h1>
        <div class="grid-container">
            <div class="item1">item1</div>
            <div class="item2">item2</div>
            <div class="item3">item3</div>
            <div class="item4">item4</div>
        </div>
    </div>
複製代碼

.grid-container {
    display: grid;
    grid-template-rows: 25% 25% 25%;
    grid-template-columns: 25% 25% 25%; 
    grid-template-areas: 
      "item1 item1 item2"
      "item3 item3 item2"
      "item4 item4 item4";
}
.item1 {
    grid-area: item1
}
.item2 {
    grid-area: item2
}
.item3 {
    grid-area: item3
}
.item4 {
    grid-area: item4
}
複製代碼

效果圖

完整代碼及動手嘗試點這裏

結語

其實我前面一直強調簡單，緣由有三：其一，網格佈局各個屬性的設置很全面也很好理解，「難」的只是多和雜；其二，我只有強調簡單才能減小你閱讀時的枯燥和增長你的自信；其三，本文是對參考博文的的總結，具體的細節還須要你用心去實踐和體會，畢竟修行靠我的。

參考文獻

1. CSS Grid 網格佈局教程，阮一峯

(條理清晰，簡單易懂)

2. 寫給本身看的display: grid佈局教程，張鑫旭

（深刻分析，互動性強）

---

QQ：1448373124（歡迎交流前端技術，對於文章疏漏處歡迎指正）

轉載請註明出處---掘金果醬淋