• 網(wǎng)格布局也叫g(shù)rid布局，平常寫樣式的時(shí)候基本上都是用的flex布局。
  像以下布局，用flex布局就可能會(huì)有有點(diǎn)麻煩，這時(shí)候用grid布局就方便的多了。

或者是照片墻

grid布局就是將容器劃分為行和列，產(chǎn)生單元格，然后在指定的單元格，可以看作是二維布局，我們一直經(jīng)常用的flex布局也就可以看作一維布局。
介紹
gird布局很強(qiáng)大，采用網(wǎng)格布局的區(qū)域，稱為容器。容器內(nèi)部子元素，稱為項(xiàng)目，即container->item。
容器屬性
Gird布局的屬性分為兩類。一類定義在容器上面，稱為容器屬性，另一類定義在項(xiàng)目上面，稱為項(xiàng)目屬性。這部分先介紹容器屬性。
display屬性
display: grid指定一個(gè)容器采用網(wǎng)格布局。
1.grid的屬性

1. grid-template-columns:定義每一行列的列寬。
2. grid-template-rows:定義每一行的行高。
   還有一種重復(fù)某種不固定大小模式:
   grid-template-columns：repeat(2,100px 80px);
   代表重復(fù)2次100px 80px的模式，也就是4列，等同于:
   grid-template-columns：100px 80px 100px 80px;
   下面舉個(gè)例子:
   HTM:

css: .father { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-template-columns: repeat(2, 100px 80px); } 效果:

上面寫了9個(gè)元素，分別給了不同的顏色，根據(jù) grid-template-columns和grid-template-rows或者grid-template-columns來設(shè)置他們的大小，這里的特殊就是，如果不給里面各個(gè)單元格大小，那么設(shè)置的列寬和行高就會(huì)去設(shè)置成每個(gè)單元格的大小，如果給了大小，那么設(shè)置的就是每個(gè)單元格之前的間距了。
2.關(guān)鍵字
1.auto-fill;如果容易大小不固定，項(xiàng)目大小固定，可以用auto-fill關(guān)鍵字填充；
自動(dòng)填充: repeat(auto-fill, 30px)

也就是設(shè)置每個(gè)單元格的大小都一樣，然后并列排放。
2.fr(fraction):如果兩列的寬分別是1fr和2fr，就表示后者是前者的兩杯。
例子:
grid-template-columns: 1fr 2fr 4fr 1fr 1fr;

這里設(shè)置后會(huì)發(fā)現(xiàn)如果設(shè)置的列多了，那后者的倍數(shù)都是基于第一位疊加的。
3.minmax();長(zhǎng)度范圍
grid-template-columns: 1fr 5fr minmax(100px, 1fr);

第一列是1fr，第二列是5fr，第三列最小值是100px，最大是1fr。當(dāng)?shù)诙衒r無限大時(shí)和的第三列到100px時(shí)，會(huì)往第一列截止。這里指的無限大也就是沒有父級(jí)設(shè)置大小。
4.auto;自適應(yīng)
grid-template-columns: 100px auto 100px;

自適應(yīng)也就是自動(dòng)填充完剩余的空間(不設(shè)置最大值最小值的情況下)
5.網(wǎng)格名稱
網(wǎng)格閑名稱，同一根線可以有多個(gè)名稱:
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
指定每一根網(wǎng)格線的名字，方便以后的引用。也可以有多個(gè)名字；[c1,c1a]
6.區(qū)域
grid-template-areas:網(wǎng)格布局允許置頂區(qū)域(area)，一個(gè)區(qū)域由單元格或多個(gè)單元格組成。grid-template-areas屬性用于定義區(qū)域。
grid-template-areas: ‘a(chǎn) b c’ ‘d e f’ ‘g h i’;
div:nth-child(1) {
grid-area: a;
}

可以實(shí)現(xiàn)類似于這樣一個(gè)單元格占多個(gè)位置的情況。
7.放置順序
grid-auto-flow:劃分網(wǎng)格后，容器的子元素也會(huì)按照順序，自動(dòng)放置在每一個(gè)網(wǎng)格中。默認(rèn)的放置順序是"先行后列"，即先填滿第一行，再開始放入第二行；也可設(shè)置為column變成先填滿第一列再填第二列；
grid-auto-flow：column

8.單元格水平位置與垂直位置
justify-items：屬性設(shè)置單元格內(nèi)容的水平位置（左中右）；
align-items：屬性設(shè)置單元格內(nèi)容的垂直位置（上中下）；

• start：對(duì)齊單元格的起始邊緣。
• end：對(duì)齊單元格的結(jié)束邊緣。
• center：單元格內(nèi)部居中。
• stretch：拉伸，占滿單元格的整個(gè)寬度（默認(rèn)值）。
  justify-items:
  align-items:
  

9.整體內(nèi)容的位置
justify-content：整個(gè)內(nèi)容區(qū)域在容器里面的水平位置（左中右）；
align-content：整個(gè)內(nèi)容區(qū)域的垂直位置（上中下）。
justify-content
align-content

總結(jié)
Flex布局是軸線布局，只能指定"項(xiàng)目"針對(duì)軸線的位置，可以看作是一維布局，Grid 布局則是將容器劃分成“行"和“列”，產(chǎn)生單元格，然后指定"項(xiàng)目所在”的單元格，可以看作是二維布局，Grid布局遠(yuǎn)比 Flex布局強(qiáng)大。(不過存在兼容性問題，使用之前應(yīng)看具體需求)
兼容性

https://caniuse.com/?search=grid