Modul Susunan Grid CSS

Header
Menu
Main
Right
Footer

Coba Sendiri

Layout Grid

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

Dukungan Peramban

Semua peramban modern mendukung atribut grid.

57.0 16.0 52.0 10 44

Elemen Grid

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

Contoh

<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

Coba Sendiri

Display Attribute

ketika atribut HTML element display diperuntukkan nilai grid atau inline-grid jika, maka ia akan menjadi kontainer grid.

Contoh

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

Coba Sendiri

Contoh

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

Coba Sendiri

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

Grid Columns (Kolom Grid)

Garis vertikal item grid disebut kolom.

Grid Rows (Baris Grid)

Garis horizontal item grid disebut baris.

Grid Gaps (Jarak Grid)

Jarak antara setiap kolom/baris disebut jarak.

Anda dapat mengatur ukuran jarak dengan salah satu atribut berikut:

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

Contoh

grid-column-gap Atribut menetapkan jarak antar kolom:

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

Coba Sendiri

Contoh

grid-row-gap Atribut menetapkan jarak antar baris:

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

Coba Sendiri

Contoh

grid-gap Atribut adalah singkatan untuk atribut grid-row-gap dan grid-column-gap:

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

Coba Sendiri

Contoh

grid-gap Atribut dapat digunakan untuk menetapkan jarak antar baris dan kolom ke nilai yang sama:

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

Coba Sendiri

Garis Grid (Grid Lines)

Garis antara kolom disebut garis kolom (column lines).

Garis antara baris disebut garis baris (row lines).

Ketika menempatkan item grid di kontainer grid, referensi angka baris:

Contoh

Letakkan item grid di garis kolom 1 dan berakhir di garis kolom 3:

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

Coba Sendiri

Contoh

Letakkan item grid di garis baris 1 dan berakhir di garis baris 3:

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

Coba Sendiri