本篇文章主要介紹CSS Grid佈局即網格佈局的基礎知識。
推薦參考學習:《CSS教學》
對於前端的初學者來說,CSS Grid佈局的概念可能有點陌生。其實也是非常容易理解的。我們都知道css是佈局網頁樣式的,通常都要考慮到網頁相容、盒子浮動、定位等hack實現問題,而css Grid佈局也就是css 網格佈局,是首個特地為解決這種問題而創造出來的模組。
簡單地說,CSS Grid佈局就是一個二維的基於網格的佈局系統,它可以同時處理列(Columns)和行(rows) ,目標是改變我們基於網格設計的使用者介面方式。
下面我們就透過簡單的Grid 佈局範例給大家介紹Grid網格佈局:
##Grid 佈局的簡單程式碼範例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Grid网格布局示例</title> </head> <style> .wrapper { display: grid; grid-template-rows: 100px 100px 100px; } .item1 { grid-column-start: 1; grid-column-end: 4; } .item1{ background: #333333; } </style> <body> <div class="wrapper"> <div class="item1" style=" background: #745A74;">大导航</div> <div class="item2" style="background: #CCCC66">2</div> <div class="item3" style="background: #FFCFCF">3</div> <div class="item4" style="background: aquamarine">4</div> <div class="item5" style="background: chartreuse">5</div> <div class="item6" style="background: darkorange">6</div> </div> </body> </html>
display:grid屬性表示開始使用Grid佈局,也就是將元素定義為網格容器,並設定列(grid-template-columns)和行(grid-template-rows)的大小,然後按grid-column和grid-row把子元素放進容器中。
重要屬性介紹:grid-template-rows 屬性是基於網格行的維度,定義網格線的名稱和網格軌道的尺寸大小。
grid-template-columns 屬性是基於網格列的維度,定義網格線的名稱和網格軌道的尺寸大小。
Grid-column-start 屬性指定網格項目在網格列中的開始位置,方法是為其網格位置貢獻一行、一個跨度或自動。此起始位置定義網格區域的區塊起始邊緣。
Grid-column-end 屬性透過向網格放置貢獻線、跨度或無(自動)來指定網格項目在網格列中的結束位置,從而指定其網格區域的區塊結束邊緣。
本篇文章就是關於CSS Grid網格佈局的簡單基礎知識介紹,具有一定的參考價值,希望對需要的朋友有所幫助!
以上是CSS Grid網格佈局是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!