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:

Container mendeklarasikan bidang grid.
Tracks menentukan lebar kolom dan tinggi baris.
Gaps menentukan jarak antar track.
Items ditempatkan ke sel, garis, atau area.
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; }

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

Loading diagram...

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:

Apakah container benar-benar display: grid?
Apakah definisi track sudah sesuai?
Apakah gap membuat ruang tampak berbeda dari yang diduga?
Apakah item ditempatkan eksplisit atau otomatis?
Apakah konten di dalam item memaksa lebar minimum?
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

CSS Grid Layout Tracks Areas Autoplacement Minmax Fr | Rujukan Pemrograman | Mahir.dev Academy

Selesai membaca dokumentasi ini?