網格

CSS 網格是使用 display 屬性的 grid 值定義的；您可以使用 grid-template-rows 和 grid-template-columns 屬性來定義網格的列和行。

您使用這些屬性定義的網格稱為顯式網格。

如果您將內容放置在該顯式網格之外，或者您依賴自動放置並且網格演算法需要建立額外的行或列軌道來容納網格單元格，則會在隱式網格中建立額外的軌道。隱式網格是由於添加了超出已定義軌道的其他內容而自動建立的網格。

在下面的示例中，我建立了一個包含三列兩行的顯式網格。網格中的第三行是一個隱式網格行軌道，這是由於網格中有超過六個專案填滿了顯式軌道而形成的。

示例

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

css

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

html

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>

另見

網格佈局的基本概念
屬性參考

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025 年 7 月 11 日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題