1.網(wǎng)格布局(grid):

??????????????它將網(wǎng)頁劃分成一個個網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局;

2.基本概念：

??????????????容器和項目，如圖所示：

<div class="content"><div class="b">1</div><div class="b">2</div><div class="b">3</div><div class="b">4</div><div class="b">5</div><div class="b">6</div><div class="b">7</div><div class="b">8</div><div class="b">9</div></div>

??????????????.content即為容器，.b即為項目。

??????????????行和列：
????????????????????????????行：row；

????????????????????????????列：column；

3.容器屬性

??????????????display:grid;　　　　　　　　　　　　//默認是塊元素；

??????????????display:inline-grid;　　　　　　　　　//行內(nèi)塊元素

??????????????指定一個容器采用網(wǎng)格布局；

??????????????注意：設(shè)置為grid后，子元素的float,display: inline-block,display: table-cell、vertical-align和column-*等設(shè)置都將失效。

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;}

4.屬性解釋

??????????????grid-template-columns：定義每一列的列寬；

??????????????grid-template-columns：100px 100px 100px; //總共三列，每列列寬是100px；

??????????????grid-template-rows：定義每一行的行高；

??????????????grid-template-rows：100px 100px 100px; //從上至下，每行高度為100px；

??????????????//除了使用像素，還可以使用百分比；

??????????????拓展：

??????????????重復寫值很麻煩，可以用repeate函數(shù)；

??????????????repeat(次數(shù)，大小)；

??????????????例如：repeat(3,100px); //重復3次，每次100px；

??????????????repeat寫法：

??????????????grid-template-columns：repeat(3,100px);

??????????????grid-template-rows：repeat(3,100px);

??????????????也可以重復某一種不固定大小模式；

??????????????例如：

??????????????grid-template-columns：100px 80px 100px;

??????????????改寫成：

??????????????grid-template-columns：repeat(2,100px 80px); //代表重復2次100px 80px的模式；也就是4列；

??????????????等同于：

??????????????grid-template-columns：100px 80px 100px 80px;

??????????????如圖：　

5.關(guān)鍵字

??????????????1,auto-fill;如果容器大小不固定，項目大小固定，可以用auto-fill關(guān)鍵字自動填充；

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: repeat(auto-fill, 100px); }

??????????????2,fr(fraction):如果兩列的寬度分別為1fr和2fr，就表示后者是前者的兩倍。

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 1fr 2fr;grid-template-rows: repeat(3, 100px 80px); }

??????????????fr也可以和px配合使用；

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 400px 1fr 2fr; }

??????????????3.minmax();

??????????????grid-template-columns: 1fr 5fr minmax(100px, 1fr);

??????????????解釋：第一列是1fr，第二列是5fr，第三列最小值是100px,最大是1fr。當?shù)诙衒r無限大時和第三列到100px時，會往第一列借值；

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 1fr 5fr minmax(100px, 1fr); }

??????????????4.auto:自適應；

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px auto 100px; }

6.網(wǎng)格線名稱：

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; }

??????????????解釋：指定每一根網(wǎng)格線的名字，方便以后的引用。

??????????????也可以有多個名字；[c1,c1a]

7.間距

??????????????row-gap:行間距；

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;row-gap: 20px; }

??????????????row-gap:colum-gap:列間距；

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;column-gap: 20px; }

??????????????簡寫：

??????????????gap:20px 20px;

??????????????row-gap和column-gap簡寫形式；

??????????????gap省略了第二個值，瀏覽器認為第二個值等于第一個值。

8.區(qū)域

??????????????grid-template-areas：網(wǎng)格布局允許指定"區(qū)域"（area），一個區(qū)域由單個或多個單元格組成。grid-template-areas屬性用于定義區(qū)域。

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-areas: 'a b c' 'd e f' 'g h i';}

9.放置順序：

??????????????grid-auto-flow：劃分網(wǎng)格以后，容器的子元素會按照順序，自動放置在每一個網(wǎng)格。默認的放置順序是"先行后列"，即先填滿第一行，再開始放入第二行；

??????????????默認是row；

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: 'a b c' 'd e f' 'g h i';grid-auto-flow: column;}

10.單元格水平位置與垂直位置

??????????????justify-items：屬性設(shè)置單元格內(nèi)容的水平位置（左中右）；

??????????????align-items：屬性設(shè)置單元格內(nèi)容的垂直位置（上中下）；

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

??????????????簡寫：place-items；

??????????????place-items: align-items justify-items

11.整體內(nèi)容的位置：

??????????????justify-content：整個內(nèi)容區(qū)域在容器里面的水平位置（左中右）；

??????????????align-content：整個內(nèi)容區(qū)域的垂直位置（上中下）。

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;justify-content: center;align-content: center;}

??????????????簡寫：place-content；

??????????????place-content：align-content justify-content；

總結(jié)

以上是生活随笔為你收集整理的CSS3中的display:grid网格布局介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。