Grid Container dan Grid Items

Sebelum menulis properti Grid apa pun, kita perlu sepakat tentang dua peran utama: elemen yang menjadi grid container dan elemen anak yang menjadi grid items. Perbedaan ini menentukan di mana kita menulis properti — banyak kebingungan pemula berasal dari menaruh properti di elemen yang salah. Chapter ini juga memperkenalkan kosakata resmi Grid: grid line, track, cell, dan area, yang akan kita pakai di seluruh section.

display: grid Mengubah Peran Elemen #

Cukup satu deklarasi untuk mengubah elemen biasa menjadi grid container:

.papan-skor {
  display: grid;
  grid-template-columns: 120px 120px 120px;
}

Demo berikut menampilkan container berlabel dan enam item bernomor; papan inline-grid di bagian bawahnya menyatu dengan kalimat:

Item mana pun menempati sel sesuai urutan markup — kita tidak pernah mengatur posisinya satu per satu.

Ada dua konsekuensi penting dari deklarasi ini:

• Semua anak langsung otomatis menjadi grid item. Kita tidak perlu menandai item satu per satu; cukup keluarganya yang diberi display: grid.
• Cucu tidak ikut menjadi item. Hanya anak level pertama yang mengambil bagian dalam grid; elemen di dalamnya tetap mengikuti layout biasa, misalnya block atau flex sendiri.

Properti pengatur grid — grid-template-columns, gap, justify-items, dan lainnya — ditulis pada container, sedangkan properti penempatan seperti justify-self ditulis pada item. Membedakan kedua kelompok ini sejak awal menghemat banyak waktu debugging.

Kosakata Resmi: Line, Track, Cell, Area #

Dokumentasi Grid memakai empat istilah yang perlu kita kuasai karena akan muncul terus:

Diagram berikut memperlihatkan grid tiga kolom kali dua baris beserta penomoran garisnya:

garis kolom →   1        2        3        4
              ┌────────┬────────┬────────┐
garis baris 1 │ sel A  │ sel B  │ sel C  │
              ├────────┼────────┼────────┤   ← garis baris 2
              │ sel D  │ sel E  │ sel F  │
              └────────┴────────┴────────┘   ← garis baris 3
              └──track──┴──track──┴──track──┘
                kolom 1   kolom 2   kolom 3

Satu sel adalah cell, sedangkan seluruh baris pertama yang membentang dari garis kolom 1 sampai 4 adalah satu area. Penomoran garis ini bukan sekadar teori: pada bagian kedua section, kita mengarahkan item ke posisi tertentu dengan menyebut nomor garis, misalnya “mulai dari garis kolom 2”.

Keempat istilah ini bisa dilihat hidup-hidup di DevTools browser: buka panel Elements, klik grid container, lalu aktifkan penanda grid pada panel Layout. Browser kemudian menggambar nomor setiap grid line, memberi warna pada track, dan menampilkannya persis seperti diagram di atas — alat bantu yang sangat membantu saat penempatan item mulai kompleks di bagian kedua section.

inline-grid: Grid yang Menyesuaikan Lebar Isi #

Selain display: grid, ada display: inline-grid. Perilaku internalnya sama persis — anak-anaknya tetap tersusun dalam grid — tetapi bagian luarnya berperilaku seperti inline element: lebarnya menyesuaikan isi dan elemen ini bisa berdampingan dengan teks lain dalam satu baris.

.papan-mini {
  display: inline-grid;
  grid-template-columns: 34px 34px 34px;
  gap: 4px;
  vertical-align: middle;
}

Pilihan ini pas untuk komponen kecil yang disisipkan di tengah paragraf, misalnya deretan poin atau penilaian bintang.

Ringkasan #

display: grid mengangkat sebuah elemen menjadi grid container dan seluruh anak langsungnya menjadi grid items; properti pengatur grid ditulis di container, properti perataan item ditulis di item. Kosakata grid line, track, cell, dan area adalah bahasa bersama kita ke depan, dan varian inline-grid tersedia untuk komponen kecil yang menyatu dengan teks. Fondasi peran ini siap; sekarang kita mulai mendefinisikan grid secara nyata dengan properti terpenting di section ini: grid-template-columns.