Mengenal CSS Grid

Halo teman-teman!

Yuk kita bahas bareng tentang CSS Grid—fitur keren yang memudahkan kita menyusun layout dua dimensi di web. Dalam panduan ini, kita akan kenalan dari dasar sampai bisa mengatur ukuran dan posisi elemen dengan lebih leluasa. Kalau sebelumnya kamu sudah terbiasa dengan Flexbox, Grid ini akan terasa seperti pelengkap yang seru dan bermanfaat!

Grid sangat cocok buat kamu yang ingin membangun layout kompleks seperti dashboard, galeri foto, atau halaman dengan banyak elemen yang harus tersusun rapi, baik secara horizontal maupun vertikal. Yuk langsung kita mulai!

Apa Itu Grid?

Dengan menambahkan display: grid ke sebuah elemen, kita mengubahnya menjadi grid container. Jika Flexbox bekerja satu arah (horizontal atau vertikal), Grid bisa bekerja dua arah sekaligus—baik kolom maupun baris.

Grid hadir karena banyak desainer merasa kesulitan membangun layout kompleks hanya dengan Flexbox atau teknik lama seperti float. Grid ibarat sistem layout dua dimensi yang memberikan kontrol penuh terhadap penempatan dan ukuran elemen.

Kelebihan Grid:

• Cocok untuk struktur besar seperti header, sidebar, dan konten utama.

• Mendukung responsivitas secara alami.

• Ukuran bisa fleksibel dengan fr, auto, minmax(), dan lainnya.

Contoh implementasi:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

Grid bukan pengganti Flexbox, melainkan pelengkap. Gunakan Grid untuk menyusun struktur utama halaman, dan Flexbox untuk merapikan isi setiap bagian.

Mengatur Ukuran Grid

Menentukan ukuran grid sangat penting agar layout tetap konsisten dan responsif. Berikut beberapa teknik yang bisa digunakan:

1. Ukuran Tetap (px, rem)

Gunakan untuk elemen dengan dimensi konsisten.

.container {
  grid-template-columns: 400px 800px;
  grid-template-rows: 100px 200px;
}

2. Ukuran Otomatis (auto)

Menyesuaikan lebar atau tinggi sesuai isi konten.

.container {
  grid-template-columns: 200px auto;
  grid-template-rows: auto auto;
}

3. Satuan Fraksional (fr)

Proporsional terhadap ruang kosong yang tersedia.

.container {
  grid-template-columns: 1fr 2fr;
}

4. Fungsi minmax()

Menetapkan batas minimum dan maksimum.

.container {
  grid-template-columns: minmax(200px, 500px) auto;
}

5. Fungsi repeat()

Mempercepat penulisan kolom/baris berulang.

.container {
  grid-template-columns: repeat(8, 100px);
}

6. Auto Rows & Columns

Menentukan ukuran default untuk elemen yang melebihi jumlah baris/kolom yang ditentukan.

.container {
  grid-auto-rows: 50px;
  grid-auto-columns: 200px;
}

💡 Tips: Gunakan Chrome DevTools > Layout > Grid overlay untuk memvisualisasikan struktur grid secara real-time.

Menempatkan Elemen di Grid

Setelah grid terbuat, saatnya kita mengatur posisi elemen-elemen di dalamnya.

Terminologi Penting

• Grid Container: elemen dengan display: grid

• Grid Items: elemen anak dari container

• Tracks: baris & kolom

• Cells: pertemuan antara baris & kolom

• Lines: batas antar cell

Penempatan Dasar

.item {
  grid-column: 2 / 4;
  grid-row: 1 / span 2;
}

Penempatan dengan grid-column dan grid-row

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

Shorthand:

.item {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

Menggabungkan dengan Flexbox

.item {
  display: flex;
  justify-content: center;
  align-items: center;
}

grid-area untuk Penempatan Lengkap

.item {
  grid-area: 2 / 1 / 4 / 3;
}

Gunakan untuk menyederhanakan penempatan dengan satu deklarasi.

Mengubah Urutan Elemen

.item {
  order: 1;
}

Indeks Negatif

.item {
  grid-column-end: -1; /* akhir baris terakhir */
}

Menumpuk Elemen

.item1 {
  grid-area: 1 / 1 / 3 / 3;
}
.item2 {
  grid-area: 2 / 2 / 4 / 4;
  background-color: #ff660080; /* transparan */
}

Saatnya Mencoba!

Langsung aja praktik bikin layout dengan CSS Grid! Coba eksplorasi:

• grid-area

• minmax()

• repeat()

• Kombinasi dengan Flexbox

Untuk latihan seru, coba mainkan Grid Garden di: https://cssgridgarden.com

Dan jangan lupa aktifkan grid overlay di DevTools agar kamu bisa melihat struktur grid yang kamu bangun.

Selamat mencoba, dan terus eksplorasi Grid! Kalau kamu berhasil membuat layout yang keren, jangan ragu untuk membagikannya ke teman-teman. Belajar bareng selalu lebih seru! 🚀

Baca juga