網格單元格

CSS 網格佈局中,網格單元格是 CSS 網格上能擁有的最小單位。它是四條交叉的 網格線之間的空間,概念上非常像一個表格單元格。

Diagram showing an individual cell on the grid.

如果您不使用其中一種網格放置方法來放置專案,網格容器的直接子項將由自動放置演算法一個一個地放置到每個單獨的網格單元格中。將建立額外的行或列 軌道,以建立足夠的單元格來容納所有專案。

示例

在該示例中,我們建立了一個三列軌道的網格。這五個專案按順序放置到網格單元格中,首先在初始的一行三個網格單元格中放置,然後為剩餘的兩個專案建立新的一行。

css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}
html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

另見

屬性參考

延伸閱讀