什么是Grid布局?Gird為網格的意思,顧名思義就是讓你的頁面布局像一個網格一樣,把對應的組件一個個的放到你想放入的位置里面.Grid布局的優勢在於他是一個基於網格的布局系統,可以運用行與列的來設計每個組件的位置與大小,與其它布局相對來說能夠更加的方便與靈活.
怎么設置為網格布局呢?很簡單,只需在html里面需要先設置一個父元素(網格容器)來包括所有的子元素,設置為Grid布局只需要在其父元素中聲明display:grid/inlinegird即可,此時網格容器的所有直接子節點都自動成為網格項.例如:
HTML代碼:
1 <div class="container"> 2 <div class="item">1</div> 3 <div class="item">2</div> 4 <div class="item">3</div> 5 </div>
CSS代碼:
.container { display: grid/inline-gird; }
(ps:值得一提的是如果設置為grid布局的話,父元素的寬度默認為全屏,高度自適應,但如果是inline-grid的話則是寬高全部自適應.除非你指定了寬高)
grid-gap
可能你的界面會是這樣的:
全部元素都緊緊的擠在一起,看起來十分的不美觀,這時候你可以使用 grid-gap:10px 來使每個元素之間相距10px的間隙,如下圖所示:
你也可以使用 grid-column-gap/grid-row-gap 來分別使列與行之間的間隙.
grid-column-start/end 與 gird-row-start/end:
先來看看網格線的概念,下面的Line 1分別代表了第一行/列網格線,其它Line x同上.
使用以下代碼 .item1{ grid-column-start:1; grid-column-end: 3; } 可以達到以下效果:
grid-column-start 是規定改元素的列起始基線處於哪個網格線,grid-column-end 是規定改元素的結束基線處於哪個網格線,這樣做可以將某個元素所占的空間給增大. 而 grid-row-start/end 則上面的功能相同,只不過改變的是行而已.
grid-template-columns/rows:
grid-template-columns: 100px 200px 100px; 設置每列元素的寬度,是用改屬性后明顯第2列要比其它兩列寬兩倍.如果是 grid-template-rows: 100px 200px 100px; 的話則是改變行間的高度,你們可以自己試試.
一口氣寫完好累,抱歉,剩下的內容后面補上