什么是網(wǎng)格布局？
它將網(wǎng)頁劃分成一個(gè)個(gè)網(wǎng)格，可以任意組合不同的網(wǎng)格啰脚，做出各種各樣的布局。網(wǎng)格布局 CSS為布局新增的一個(gè)模塊。網(wǎng)格布局特性主要是針對(duì)于Web應(yīng)用程序的開發(fā)者橄浓×Ｃ危可以用這個(gè)模塊實(shí)現(xiàn)許多不同的布局。網(wǎng)絡(luò)布局可以將應(yīng)用程序分割成不同的空間荸实，或者定義他們的大小匀们、位置以及層級(jí)。
就像表格一樣准给，網(wǎng)格布局可以讓W(xué)eb設(shè)計(jì)師根據(jù)元素按列或行對(duì)齊排列泄朴，但他和表格不同，網(wǎng)格布局沒有內(nèi)容結(jié)構(gòu)露氮，從而使各種布局不可能與表格一樣祖灰。例如，一個(gè)網(wǎng)格布局中的子元素都可以定位自己的位置畔规，這樣他們可以重疊和類似元素定位局扶。
此外，沒有內(nèi)容結(jié)構(gòu)的網(wǎng)格布局有助于使用流體叁扫、調(diào)整順序等技術(shù)管理或更改布局三妈。通過結(jié)合CSS的媒體查詢屬性，可以控制網(wǎng)格布局容器和他們的子元素陌兑，使用頁面的布局根據(jù)不同的設(shè)備和可用空間調(diào)整元素的顯示風(fēng)格與定位沈跨，而不需要去改變文檔結(jié)構(gòu)的本質(zhì)內(nèi)容。
網(wǎng)格布局的效果
像這樣的布局
這樣
又或者像這樣照片墻的形式
網(wǎng)格布局常用的屬性
網(wǎng)格容器是決定將網(wǎng)格分為幾行幾列兔综，所以首先實(shí)現(xiàn)網(wǎng)格布局就要使該容器具有以下幾個(gè)屬性：
1饿凛、指定容器使用網(wǎng)格布局： display: grid
2、指定容器設(shè)為行內(nèi)元素并使用網(wǎng)格布局：display: inline-grid
3软驰、定義每一列的列寬：grid-template-columns
4涧窒、定義每一行的行高：grid-template-row
5、重復(fù)賦值：repeat(次數(shù),值)
6锭亏、自動(dòng)填充：如：repeat(auto-fill,30px)
7纠吴、比例：fr（如 grid-template-columns: 1fr 2fr;意思是容器分為2列，二列的寬度是一列的2倍)
8慧瘤、長(zhǎng)度范圍：minmax()
9戴已、自動(dòng)填充剩余空間（不設(shè)置最大值最小值的情況下）：auto
10、網(wǎng)格線名稱锅减，同一根線可以有多個(gè)名稱： grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
11糖儡、行間距：grid-row-gap
12、列間距：grid-column-gap
13怔匣、間距：grid-gap：行間距數(shù)值 列間距數(shù)值行間距和列間距數(shù)值相同可只寫一個(gè)值
14握联、區(qū)域：b到h的分別對(duì)應(yīng)七個(gè)區(qū)域。.表示第一個(gè)區(qū)域不用；h表示兩個(gè)區(qū)域合并金闽；每個(gè)區(qū)域的起始網(wǎng)格線自動(dòng)命名為區(qū)域名-start纯露，終止網(wǎng)格線自動(dòng)命名為區(qū)域名-end；
grid-template-areas: '. b c'
'd e f'
'g h h';
15代芜、填充順序：grid-auto-flow默認(rèn)是row埠褪，即先填滿第一行再填下一行；也可設(shè)置為column變成先填滿第一列再填第二列蜒犯；row dense和column dense表示盡量填滿不出現(xiàn)空白
16组橄、單元格內(nèi)容的水平位置、垂直位置罚随；默認(rèn)stretch玉工，即填滿整個(gè)單元格
justify-items: start | end | center | stretch;/*水平位置*/
align-items: start | end | center | stretch;/*垂直位置*/
place-items: '水平位置' '垂直位置';/*參數(shù)相同可只寫一個(gè)值*/
17、內(nèi)容塊在網(wǎng)格容器的水平位置淘菩、垂直位置遵班；默認(rèn)stretch，即填滿整個(gè)單元格
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content:'水平位置' '垂直位置';/*參數(shù)相同可只寫一個(gè)值*/
space-around : 單元格兩側(cè)的間隔相等潮改，是單元格與容器邊框的間隔的兩倍狭郑。
space-between : 單元格間隔相等，單元格與容器邊框之間沒有間隔汇在。
space-evenly : 單元格間隔和單元格與容器邊框的間隔相等翰萨，。
18糕殉、指定項(xiàng)目外的單元格屬性：grid-auto-columns 亩鬼，grid-auto-rows
19、合并屬性
grid-template: grid-template-columns grid-template-rows grid-template-areas
grid: grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow
20阿蝶、項(xiàng)目根據(jù)網(wǎng)格線定位雳锋，可使用z-index
grid-column-start:2;
grid-column-end:3;
/*相當(dāng)于*/
grid-column:2 / 3
grid-row-start:4;
grid-row-end :5;
/*相當(dāng)于*/
21、指定項(xiàng)目放在哪一個(gè)區(qū)域: grid-area: a; grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
22羡洁、設(shè)置單元格內(nèi)容的水平玷过、垂直位置，只作用于單個(gè)項(xiàng)目
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
justify-self: start | end | center | stretch;
本篇文章就是關(guān)于Grid網(wǎng)格布局的簡(jiǎn)單基礎(chǔ)知識(shí)介紹筑煮，具有一定的參考價(jià)值辛蚊，希望對(duì)需要的朋友有所幫助！
作者：是劉某啊
鏈接：http://www.reibang.com/p/1f0c2e965770
