CSS Grid Layout Tracks Areas Autoplacement Minmax Fr

Definisi

CSS Grid Layout adalah sistem layout dua dimensi di CSS untuk mengatur elemen dalam baris dan kolom secara bersamaan.

Grid paling berguna saat kamu perlu mendefinisikan struktur ruang: area header, sidebar, konten utama, kartu, form multi-kolom, atau susunan komponen yang harus tetap rapi di beberapa ukuran layar.

Kapan Grid lebih cocok daripada Flexbox

Pakai Grid kalau masalah utamanya adalah layout area.

Contoh situasi yang biasanya lebih cocok untuk Grid:

• halaman dengan header, sidebar, content, dan aside
• galeri kartu yang perlu banyak kolom
• form dengan label dan input yang harus sejajar
• dashboard yang punya beberapa blok dalam tata letak 2D
• layout yang perlu kontrol baris dan kolom sekaligus

Pakai Flexbox kalau masalah utamanya adalah distribusi item pada satu sumbu.

Contoh yang biasanya lebih cocok untuk Flexbox:

• toolbar horizontal
• tombol, chip, atau tag list
• alignment isi card di satu baris
• stack vertikal sederhana
• susunan komponen kecil yang hanya perlu satu arah

Ringkasnya:

• Flexbox membaca item sebagai deretan.
• Grid membaca item sebagai peta area.

Cara membaca Grid secara mental

Kalau kamu ingin membaca Grid dengan cepat, bayangkan urutannya begini:

1. Container mendeklarasikan bidang grid.
2. Tracks menentukan lebar kolom dan tinggi baris.
3. Gaps menentukan jarak antar track.
4. Items ditempatkan ke sel, garis, atau area.
5. Auto placement mengisi item yang belum diberi posisi eksplisit.

Mental model yang berguna:

• track = jalur ruang
• line = batas track
• cell = pertemuan satu baris dan satu kolom
• area = gabungan beberapa cell
• auto placement = sistem antrian yang menaruh item berikutnya ke slot kosong

Kalau kamu bisa membayangkan garis-garis itu, Grid biasanya jadi jauh lebih gampang dibaca daripada sekadar menghafal properti.

Grid container dan grid item

Elemen dengan display: grid menjadi grid container.

Anak langsungnya menjadi grid item.

css

.layout {
  display: grid;
}

Begitu container aktif, properti seperti grid-template-columns, grid-template-rows, gap, dan grid-template-areas mulai membentuk struktur layout.

Tracks: baris dan kolom

Track adalah jalur ruang di Grid.

• column track = satu kolom grid
• row track = satu baris grid

Kamu mendefinisikan track lewat grid-template-columns dan grid-template-rows.

css

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr;
}

Contoh di atas berarti:

• kolom pertama lebarnya tetap 240px
• kolom kedua mengambil sisa ruang dengan 1fr
• baris pertama mengikuti tinggi konten (auto)
• baris kedua mengisi sisa ruang vertikal (1fr)

fr: unit fraksi ruang

fr berarti fraksi dari ruang yang tersedia.

css

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

Artinya ruang sisa dibagi menjadi 4 bagian:

• kolom pertama = 1 bagian
• kolom kedua = 2 bagian
• kolom ketiga = 1 bagian

Jadi kolom tengah dua kali lebih lebar dari dua kolom lain.

Catatan penting tentang fr

fr bukan ukuran absolut.

fr bekerja setelah ukuran tetap dan ukuran konten yang relevan dihitung. Karena itu, fr sangat cocok untuk layout yang fleksibel, tetapi tetap perlu dipasangkan dengan batas minimum yang masuk akal.

minmax(): memberi batas bawah dan atas

minmax(min, max) dipakai untuk memberi rentang ukuran track.

css

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

Di sini setiap kolom:

• tidak boleh lebih kecil dari 180px
• boleh tumbuh sampai mengisi ruang dengan 1fr

minmax() penting karena fr tanpa batas minimum bisa membuat item terlalu sempit ketika ruang mengecil.

Pola umum minmax()

1. Kolom kartu responsif

css

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

Ini salah satu pola Grid yang paling sering dipakai untuk card list.

2. Sidebar dan konten

css

.shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

Pola ini menjaga sidebar tidak terlalu kecil, sementara konten utama tetap fleksibel.

gap: jarak antar track

gap mengatur jarak antar baris dan kolom tanpa perlu margin manual pada item.

css

.grid {
  display: grid;
  gap: 1rem;
}

Bisa juga dibedakan:

css

.grid {
  row-gap: 1rem;
  column-gap: 1.5rem;
}

Atau shorthand:

css

.grid {
  gap: 1rem 1.5rem;
}

Kenapa gap lebih aman daripada margin antar item

• jarak antar item lebih konsisten
• tidak perlu menghapus margin di item terakhir
• lebih mudah dibaca sebagai bagian dari layout container
• tidak mengganggu hitungan spacing di luar grid item

Template areas

grid-template-areas dipakai untuk memberi nama area layout.

css

.layout {
  display: grid;
  grid-template-columns: 240px 1fr 280px;
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
}
 
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

Pendekatan ini bagus saat layout punya struktur yang jelas dan ingin dibaca seperti peta.

Kapan template areas membantu

• layout halaman besar
• dashboard
• struktur landing page
• app shell dengan zona yang jelas

Kapan template areas kurang cocok

• daftar item yang jumlahnya dinamis
• layout yang berubah terlalu sering
• kasus yang lebih enak ditulis sebagai auto placement atau explicit placement sederhana

Auto placement

Kalau item tidak diberi posisi eksplisit, Grid akan menempatkannya otomatis.

Urutan defaultnya mengikuti alur baris, kiri ke kanan, lalu turun ke baris berikutnya.

css

.list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Dengan container seperti itu, item akan mengisi slot dari kiri ke kanan sampai baris penuh, lalu lanjut ke baris berikutnya.

Kapan auto placement berguna

• daftar kartu
• hasil pencarian
• galeri gambar
• item yang jumlahnya tidak tetap

Saat auto placement perlu dikendalikan

Kalau kamu ingin item berjalan dari atas ke bawah dulu, atau ingin pola pengisian tertentu, gunakan properti seperti:

• grid-auto-flow
• grid-column
• grid-row

Contoh:

css

.list {
  display: grid;
  grid-auto-flow: row;
}

Penempatan item eksplisit

Item bisa ditempatkan dengan garis grid.

css

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

Artinya item membentang dari garis kolom 1 sampai 3, dan dari baris 1 sampai 2.

Cara baca garis grid

Kalau kamu melihat 1 / 3, baca itu sebagai:

• mulai di garis 1
• berhenti sebelum garis 3

Jadi item mencakup track di antaranya.

Pola layout yang sering dipakai

1. App shell

css

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar content";
}

Pola ini cocok untuk dashboard atau panel admin.

2. Card grid responsif

css

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

Ini pola default yang sangat sering dipakai saat item berbentuk kartu.

3. Form dua kolom

css

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

Cocok untuk form yang punya beberapa field yang perlu sejajar.

4. Layout editorial

css

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2rem;
}

Pola ini umum untuk konten utama dengan sidebar referensi atau TOC.

Alur keputusan layout

Jebakan umum

1. Mengira fr selalu aman tanpa minimum

Kalau hanya memakai 1fr 1fr 1fr, layout bisa terlalu rapuh ketika konten butuh ruang minimum.

Solusi umum:

• pakai minmax()
• tentukan batas minimum yang masuk akal
• hindari memaksa kolom ikut mengecil di bawah kebutuhan konten

2. Salah memahami auto-fit dan auto-fill

Keduanya sering dipakai bersama minmax(), tetapi hasilnya beda.

• auto-fit cenderung merapatkan track kosong
• auto-fill cenderung mempertahankan slot yang tersedia

Kalau tujuanmu kartu mengisi ruang secara natural, auto-fit biasanya lebih sering dipilih.

3. Menaruh terlalu banyak template area

grid-template-areas bagus untuk struktur yang jelas, tetapi bisa jadi sulit dirawat kalau terlalu detail.

Tanda layout mulai terlalu rumit:

• banyak nama area kecil yang susah dipahami
• template panjang dan berulang
• perubahan kecil harus mengubah banyak baris

4. Memakai Grid untuk alignment internal sederhana

Kalau yang dibutuhkan hanya ikon, teks, dan tombol dalam satu baris, Flexbox biasanya lebih ringan.

Grid tetap bisa dipakai, tetapi sering terasa berlebihan.

5. Lupa bahwa item bisa meluap oleh kontennya sendiri

Grid mengatur ruang, tetapi bukan berarti isi di dalam item otomatis aman.

Perhatikan:

• panjang teks yang tidak dipotong
• gambar yang tidak di-scale
• item yang punya min-width bawaan

Salah satu jebakan paling umum adalah kolom 1fr yang tidak mau mengecil karena ada konten anak yang memaksa lebar minimum.

Catatan implementasi

Gunakan minmax(0, 1fr) saat konten bisa memaksa overflow

css

.content {
  min-width: 0;
}
 
.layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

Ini penting ketika konten utama berisi teks panjang, tabel, atau komponen yang lebar intrinsiknya besar.

Jangan bergantung pada margin untuk spacing grid

Kalau spacing adalah bagian dari struktur layout, gunakan gap.

Gunakan explicit placement hanya untuk item yang memang perlu dikunci

Kalau semua item diberi grid-column dan grid-row, Grid kehilangan sebagian manfaat auto placement.

Cara membaca Grid saat debugging

Kalau layout Grid terasa salah, cek urutan berikut:

1. Apakah container benar-benar display: grid?
2. Apakah definisi track sudah sesuai?
3. Apakah gap membuat ruang tampak berbeda dari yang diduga?
4. Apakah item ditempatkan eksplisit atau otomatis?
5. Apakah konten di dalam item memaksa lebar minimum?
6. Apakah minmax() sudah dipakai di tempat yang tepat?

Kalau kamu membaca Grid dengan cara ini, debugging biasanya lebih cepat karena masalahnya jadi kelihatan sebagai salah satu dari tiga hal:

• struktur track salah
• penempatan item salah
• konten internal yang terlalu dominan

Ringkasan praktis

Pilih Grid kalau kamu memikirkan:

• baris dan kolom sekaligus
• area layout yang jelas
• susunan 2D yang butuh kontrol struktur
• item yang harus tetap rapi di berbagai ukuran layar

Pilih Flexbox kalau kamu memikirkan:

• satu arah
• distribusi ruang sepanjang satu sumbu
• alignment internal komponen
• urutan item yang mengalir

Referensi terkait

• Flexbox vs Grid
• Responsive Layout: Media Queries, Fluid Sizing, dan Container Queries
• Box Model
• Display, Overflow, dan Containment Sederhana