模块布局网格 CSS

Header
Menu
Main
Right
Footer

试一试亲自

Layout Grid

Modul Layout Grid CSS (CSS Grid Layout Module) menyediakan sistem layout berbasis grid dengan baris dan kolom, yang membuat desain halaman web menjadi lebih mudah tanpa memerlukan floating dan positioning.

Dukungan Peramban

Semua peramban modern mendukung sifat grid.

57.0 16.0 52.0 10 44

Elemen Grid

Layout grid berdiri dari elemen induk serta satu atau lebih elemen anak.

实例

<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

试一试亲自

Atribut Display

ketika atribut HTML element display sifat diatur menjadi grid atau inline-grid ketika ia menjadi kontainer grid.

实例

.grid-container {
  display: grid;
}

试一试亲自

实例

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

试一试亲自

Semua elemen anak langsung dalam kontainer grid akan menjadi item grid secara otomatis.

Grid Columns (Grid Columns)

Garis vertikal item grid disebut kolom.

Grid Rows (Grid Rows)

Garis horizontal item grid disebut baris.

Grid Gaps (Grid Gaps)

Jarak antara setiap kolom/baris disebut jarak.

Anda dapat mengatur ukuran jarak dengan menggunakan salah satu sifat berikut:

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

实例

grid-column-gap Sifat ini mengatur jarak antar kolom:

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

试一试亲自

实例

grid-row-gap Sifat ini mengatur jarak antar baris:

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

试一试亲自

实例

grid-gap Sifat ini adalah singkatan untuk sifat grid-row-gap dan grid-column-gap:

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

试一试亲自

实例

grid-gap Sifat ini dapat digunakan untuk mengatur jarak antar baris dan jarak antar kolom menjadi nilai yang sama:

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

试一试亲自