https://github.com/ZongDuCha/ZD-1.0
display:gri
最近時間在瞭解css3 中不太常用的grid佈局,但是卻又非常的好用
以前不管我們怎麼佈局,大多數用的都是一維佈局,在複雜的場景下非常難用
而grid使用的是類似與table的二維佈局
(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;
}
複製程式碼
fr單位可以幫助我們建立一個彈列的網格軌道。它代表了網格容器中可用的空間(就像Flexbox中無單位的值)
用瀏覽器檢視效果(我用的是谷歌)
可以看到已經有4行4列的效果了
可以指定某行的寬度或高度,比如第二列的第二行高度為50%,寬度為50%
grid-template-columns: 1fr 50% 1fr 1fr;
grid-template-rows: 50px 100px 50px 50px;;複製程式碼
還可以使用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; } 複製程式碼
可以看到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;}複製程式碼
可以看到子元素定義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;}複製程式碼
同樣的方式有
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)