基本例子

CSS Grid 被定義為顯示屬性。它僅適用於父元素及其直接子元素。

考慮以下標記：

<section class="container">
  <div class="item1">item1</div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
  <div class="item4">item4</div>
</section>

將上面的標記結構定義為網格的最簡單方法是將其 display 屬性設定為 grid：

.container {
  display: grid;   
}

但是，這樣做總會導致所有子元素在彼此之上崩潰。這是因為孩子們目前不知道如何在網格中定位自己。但我們可以明確告訴他們。

首先，我們需要告訴網格元素 .container 將構成其結構的行數和列數，我們可以使用 grid-columns 和 grid-rows 屬性來做到這一點（注意複數）：

.container {
  display: grid;
  grid-columns: 50px 50px 50px;
  grid-rows: 50px 50px;
}

但是，這對我們來說仍然沒有多大幫助，因為我們需要為每個子元素命令。我們可以通過指定 grid-row 和 grid-column 值來實現這一點，這些值將告訴它它在網格中的位置：

.container .item1 {
  grid-column: 1;
  grid-row: 1;
}
.container .item2 {
  grid-column: 2;
  grid-row: 1;
}
.container .item3 {
  grid-column: 1;
  grid-row: 2;
}
.container .item4 {
  grid-column: 2;
  grid-row: 2;
}

通過為每個專案提供列和行值，它標識容器中的專案順序。

在 JSFiddle 上檢視一個工作示例。你需要在 IE10，IE11 或 Edge 中檢視此內容才能使其正常工作，因為這些是目前唯一支援網格佈局的瀏覽器（帶有供應商字首 -ms-）或根據 caniuse 在 Chrome，Opera 和 Firefox 中啟用標記以便測試跟他們。