CSS 網格布局模塊

Header
Menu
Main
Right
Footer

親自試一試

網格布局

CSS 網格布局模塊（CSS Grid Layout Module）提供了帶有行和列的基于網格的布局系統，它使網頁設計變得更加容易，而無需使用浮動和定位。

瀏覽器支持

所有現代瀏覽器均支持網格屬性。

57.0 16.0 52.0 10 44

網格元素

網格布局由一個父元素以及一個或多個子元素組成。

實例

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9

親自試一試

Display 屬性

當 HTML 元素的 display 屬性設置為 grid 或 inline-grid 時，它就會成為網格容器。

實例

.grid-container {
  display: grid;
}

親自試一試

實例

.grid-container {
  display: inline-grid;
}

親自試一試

網格容器的所有直接子元素將自動成為網格項目。

網格列（Grid Columns）

網格項的垂直線被稱為列。

網隔行（Grid Rows）

網格項的水平線被稱為行。

網格間隙（Grid Gaps）

每列/行之間的間隔稱為間隙。

您可以通過使用以下屬性之一來調整間隙大小：

  • grid-column-gap
  • grid-row-gap
  • grid-gap

實例

grid-column-gap 屬性設置列之間的間隙：

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

親自試一試

實例

grid-row-gap 屬性設置行之間的間隙：

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

親自試一試

實例

grid-gap 屬性是 grid-row-gap 和 grid-column-gap 屬性的簡寫屬性：

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

親自試一試

實例

grid-gap 屬性還可用于將行間隙和列間隙設置為一個值：

.grid-container {
  display: grid;
  grid-gap: 50px;
}

親自試一試

網格行（Grid Lines）

列之間的線稱為列線（column lines）。

行之間的線稱為行線（row lines）。

當把網格項目放在網格容器中時，請引用行號：

實例

把網格項目放在列線 1，并在列線 3 結束它：

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

親自試一試

實例

把網格項目放在行線 1，并在行線 3 結束它：

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

親自試一試