本篇文章主要介紹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中文網其他相關文章！
