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;
}

亲自试一试