css grid佈局

總督sir發表於2017-12-19
原文網址 : https://juejin.im/post/5a374a905188257d38440e4b
CSS

https://github.com/ZongDuCha/ZD-1.0

display:gri

最近時間在瞭解css3 中不太常用的grid佈局，但是卻又非常的好用

以前不管我們怎麼佈局，大多數用的都是一維佈局，在複雜的場景下非常難用

而grid使用的是類似與table的二維佈局

css grid佈局

(grid 相容情況)

一開始父元素宣告佈局為grid

 .grid{ display:grid; } 
複製程式碼

grid-template-columns

grid-template-rous

然後使用grid-template-columns 定義列, grid-template-rous 定義行 ,建立一個4行4列的佈局

.grid{ 
    border: 1px solid #000;     width: 350px;    margin: 0 auto;     display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;     grid-template-rows: 50px 50px 50px 50px; 
} 
複製程式碼


css grid佈局

fr單位可以幫助我們建立一個彈列的網格軌道。它代表了網格容器中可用的空間（就像Flexbox中無單位的值）

用瀏覽器檢視效果（我用的是谷歌）

可以看到已經有4行4列的效果了

css grid佈局

可以指定某行的寬度或高度，比如第二列的第二行高度為50%，寬度為50%

grid-template-columns: 1fr 50% 1fr 1fr; 
grid-template-rows: 50px 100px 50px 50px;;複製程式碼

css grid佈局

還可以使用grid-gap給相鄰的網路增加10px的縫隙

.grid{ 
    border: 1px solid #000; 
    width: 95%;
    margin: 0 auto; 
    display:grid;

    grid-template-columns: 1fr 50% 1fr 1fr; 
    grid-template-rows: 20px 50px 20px 20px; 
    grid-gap:10px;
} 複製程式碼

個

在grid容器裡寫一個grid-list的div 

.grid-list{ grid-column:4; grid-row:2; } 複製程式碼

css grid佈局

可以看到grid-column：4把位置放在了父容器網格列中的第四列

而grid-row：2放在了父容器網格行的第二行。

123

而且grid-column，grid-row很有意思，寫多幾個div

<div class="grid">    
    <div class="grid-list">1</div>    
    <div class="grid-list">2</div>    
    <div class="grid-list">3</div>
</div>複製程式碼

.grid-list:nth-child(1){    grid-column:7;    grid-row:7;}
.grid-list:nth-child(2){    grid-column:6;    grid-row:6;}
.grid-list:nth-child(3){    grid-column:5;    grid-row:5;}複製程式碼

css grid佈局

可以看到子元素定義grid-column,grid-row可以改變在網格的位置

可以用斜線（開頭/結尾）這樣寫

.grid-list:nth-child(1){ grid-column: 1/5;}
 .grid-list:nth-child(2){ grid-column: 1;grid-row:2/4}
.grid-list:nth-child(3){ grid-column: 3/5;grid-row: 3/5;}複製程式碼

css grid佈局


css grid佈局

css grid佈局

同樣的方式有

grid-column-start （行的開頭）               grid-column-end（行的結尾）

grid-row-start （列的開頭）                     grid-row-end（列的結尾）

.grid-list:nth-child(1){ grid-column-start:1;grid-column-end:5} 
.grid-list:nth-child(2){ grid-column-start:1;grid-row-start:2;grid-row-end:4}
.grid-list:nth-child(3){ grid-column-start: 3;grid-column-end:5;grid-row-start: 3;grid-row-end: 5;}複製程式碼

結果跟上面的一樣，感覺比較複雜

個人心得，未來的佈局應該會大部分使用grid，現在趕緊學習學習


在ie11下grid不能使用，有什麼辦法呢？
使用：https://github.com/FremyCompany/css-grid-polyfill    （目前還是1.0）


相關文章