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

果醬淋發表於2019-09-02

前言

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

開篇

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

“wrap”：包，纏繞

比如：這個詞出現在white-space：wrap | nowrap; 粗淺的理解：當文字內容超過容器盒子時，要不要換行。你可能困惑：包和纏繞怎麼也跟換行聯絡不到一起啊。這是因為wrap的主語是“容器盒子”，即容器盒子要不要包住文字。而換行的主語是文字，容器盒子如果要求包住，那文字只能為了達到要求而進行換行。下面將會多次出現該詞。

“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。這裡你先記住一個重點就夠了：複數，也就是多個的。

“item”：專案

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

“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 扎堆

上程式碼

.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（歡迎交流前端技術，對於文章疏漏處歡迎指正）

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

CSS網格佈局
2018-06-28
CSS
[譯] 簡單的響應式現代 CSS 網格佈局
2018-09-02
CSS
CSS實現的網頁柵格佈局簡單介紹
2017-03-24
CSS網頁
CSS Grid 網格佈局
2017-08-14
CSS
CSS Grid 網格佈局教程
2019-03-25
CSS
策略模式原來這麼簡單！
2018-12-28
模式
css網格佈局的最佳實踐
2019-01-05
CSS
策略模式原來就這麼簡單！
2018-12-24
模式
翻譯 | CSS網格（CSS Grid）佈局入門
2017-05-09
CSS
【圖片版】學習CSS網格佈局
2021-09-09
CSS
原生 CSS 網格佈局學習筆記
2016-12-08
CSS筆記
原生CSS網格佈局學習筆記
2016-12-22
CSS筆記
原來 ArrayList 內部原理這麼簡單
2019-03-08
MySQL索引下推，原來這麼簡單！
2022-03-05
MySql索引
CSS 文件流技巧，讓佈局更簡單
2019-04-28
CSS
【基礎知識】Flex-彈性佈局原來如此簡單！！
2018-04-02
Flex
通過生成內容和CSS網格佈局為空單元格新增樣式
2018-06-13
CSS
15個CSS網格佈局線上生成器網站
2009-06-15
CSS網站
CSS 來佈局圖片
2020-01-02
CSS
xml轉成陣列，原來這麼簡單！
2015-05-26
XML陣列
你以為 CSS 只是個簡單的佈局？
2017-12-29
CSS
【圖片版】CSS網格佈局（Grid）完全教程
2019-03-01
CSS
css佈局簡史與決勝未來的第四代css佈局技術
2018-07-26
CSS
CSS Grid 網格佈局實現自適應9宮格
2021-12-10
CSS
原來寫個Vue 首頁就這麼簡單
2020-08-02
Vue
常見 JavaScript 設計模式 — 原來這麼簡單
2022-11-22
JavaScript設計模式
css佈局和居中簡析
2018-04-28
CSS
學會 CSS 文件流技巧，讓佈局更簡單
2019-04-23
CSS
網站開發之DIV+CSS簡單佈局網站入門篇（五）
2016-11-08
網站CSS
簡單理解flex佈局
2019-11-06
Flex
Flutter 簡單佈局技巧
2019-04-04
Flutter
CSS佈局 --- 居中佈局
2018-08-24
CSS
css佈局-float佈局
2018-04-09
CSS
網格佈局管理器
2018-09-06
用idea搭建SSM專案，原來這麼簡單
2019-01-28
IdeaSSM
CSS並不簡單：多欄佈局（Multi-Columns Layout）
2019-03-03
CSS
[譯] 使用 CSS 網格佈局實現響應式圖片
2019-03-31
CSS
css九宮格佈局程式碼例項
2017-04-09
CSS

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

前言

開篇

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

1. 總綱領

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

1.2 設定在格子的屬性。

1.3 父子組合

2. 各個擊破。

2.1 行列

2.2 間隔

2.3 伸縮

2.4 扎堆

2.5 備胎

2.6 流

2.7 定位

2.8 特立獨行

3. 父子CP

結語

參考文獻

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

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

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

相關文章