CSS-Modul für Gitterlayout

Header
Menu
Main
Right
Footer

Selbst ausprobieren

网格布局

CSS 网格布局模块（CSS Grid Layout Module）提供了一个带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。

浏览器支持

所有现代浏览器均支持网格属性。

57.0 16.0 52.0 10 44

网格元素

网格布局由一个父元素以及一个或多个子元素组成。

Beispiel

<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

Selbst ausprobieren

Display 属性

当 HTML 元素的 display 属性设置为 grid oder inline-grid 时，它就会成为网格容器。

Beispiel

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

Selbst ausprobieren

Beispiel

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

Selbst ausprobieren

网格容器的所有直接子元素将自动成为网格项目。

网格列（Grid Columns）

网格项的垂直线被称为列。

网隔行（Grid Rows）

网格项的水平线被称为行。

网格间隙（Grid Gaps）

每列/行之间的间隔称为间隙。

您可以通过使用以下属性之一来调整间隙大小：

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

Beispiel

grid-column-gap 属性设置列之间的间隙：

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

Selbst ausprobieren

Beispiel

grid-row-gap 属性设置行之间的间隙：

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

Selbst ausprobieren

Beispiel

grid-gap 属性是 grid-row-gap 和 grid-column-gap 属性的简写属性：

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

Selbst ausprobieren

Beispiel

grid-gap 属性还可用于将行间隙和列间隙设置为一个值：

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

Selbst ausprobieren

Gitterlinien (Grid Lines)

Die Linien zwischen den Spalten werden als Spaltenlinien (column lines) bezeichnet.

Die Linien zwischen den Zeilen werden als Zeilenlinien (row lines) bezeichnet.

Beziehen Sie sich auf die Zeilennummer, wenn Sie das Gitterelement im Gitterbehälter platzieren:

Beispiel

Platzieren Sie das Gitterelement auf der Spalte 1 und beenden Sie es auf der Spalte 3:

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

Selbst ausprobieren

Beispiel

Platzieren Sie das Gitterelement auf der Zeile 1 und beenden Sie es auf der Zeile 3:

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

Selbst ausprobieren