Memahami CSS Grid dari Nol — Panduan Lengkap + Demo Interaktif

CSS Grid adalah sistem layout dua dimensi di CSS yang memungkinkan kamu menyusun elemen ke dalam baris dan kolom sekaligus. Cara pakainya: beri elemen pembungkus display: grid, tentukan jumlah kolom lewat grid-template-columns, atur jarak antar sel dengan gap, lalu semua anak langsung akan otomatis menempel ke dalam grid. Berbeda dari Flexbox yang cuma mengurus satu arah (baris saja atau kolom saja), Grid mengendalikan dua sumbu sekaligus — itulah kenapa Grid jadi pilihan utama untuk page layout, gallery, dashboard, dan struktur halaman yang kompleks.

Di panduan ini kamu akan belajar CSS Grid benar-benar dari nol: mulai dari konsep container vs item, grid-template-columns dan grid-template-rows, satuan fr, gap, repeat(), minmax(), sampai grid-template-areas dan grid responsif tanpa satu pun media query. Ada demo interaktif, mini-project dashboard, dan bagian kesalahan umum supaya kamu nggak jatuh ke lubang yang sama seperti kebanyakan pemula.

Apa Itu CSS Grid?

CSS Grid adalah modul layout CSS untuk menata elemen dalam bentuk kisi dua dimensi — baris (rows) dan kolom (columns) — secara bersamaan. Kamu mendefinisikan “kerangka” grid di elemen container, lalu menempatkan item ke dalam sel-sel yang tersedia. Semua browser modern (Chrome, Firefox, Safari, Edge) sudah mendukung Grid sejak lama, jadi kamu bisa memakainya di produksi tanpa khawatir.

Bayangkan grid seperti kertas milimeter atau papan catur. Kamu menggambar garis-garis vertikal dan horizontal untuk membentuk kolom dan baris, dan setiap perpotongan garis menciptakan sel (cell). Item bisa menempati satu sel, atau membentang ke beberapa sel sekaligus. Karena kamu mengontrol dua sumbu sekaligus, kamu bisa membuat layout yang dulu butuh float, tabel HTML, atau trik position: absolute yang bikin frustrasi — sekarang cukup beberapa baris CSS.

.container {
  display: grid;                       /* aktifkan grid */
  grid-template-columns: 1fr 1fr 1fr;  /* 3 kolom sama lebar */
  grid-template-rows: 100px 100px;     /* 2 baris tinggi 100px */
  gap: 16px;                           /* jarak antar sel */
}

Satu baris display: grid mengubah sebuah elemen biasa menjadi grid container, dan seketika itu juga semua anak langsungnya berubah menjadi grid item. Kamu tidak perlu menambah class apa pun ke anak-anaknya — mereka otomatis ikut aturan grid. Kalau kamu masih baru di dunia CSS secara umum, ada baiknya memahami dulu bagaimana ukuran elemen bekerja lewat width dan height, karena track grid sering diukur dengan satuan-satuan yang sama.

Coba Langsung: Grid Interaktif

Sebelum tenggelam ke teori, coba dulu langsung. Ubah setiap properti di demo di bawah — tambah kolom, ganti nilai fr, geser gap — dan perhatikan bagaimana grid berubah secara real-time. Cara tercepat memahami Grid bukan menghafal, tapi mengutak-atik nilai dan melihat hasilnya seketika.

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

Perhatikan bagaimana grid-template-columns dan grid-template-rows bekerja sama membentuk kerangka kisi. Kalau kamu mau bereksperimen lebih jauh dengan nilai yang lebih beragam, ada playground CSS Grid interaktif yang lebih lengkap di Hyper Sheets, tempat kamu bisa langsung menempelkan properti apa pun dan melihat kisi terbentuk.

Konsep Utama CSS Grid

Ada empat konsep yang perlu kamu kunci dulu: peran container vs item, cara mendefinisikan kolom dan baris, satuan fr, dan gap. Kalau kamu paham empat hal ini, 80% dari CSS Grid sudah ada di genggaman. Sisanya cuma pattern dan trik yang menyusul dengan sendirinya.

Container vs Item

Sama seperti Flexbox, Grid punya dua peran yang perlu kamu bedakan sejak awal:

• Grid container — elemen parent yang diberi display: grid. Di sinilah kamu menaruh aturan kerangka: berapa kolom, berapa baris, berapa jaraknya.
• Grid item — elemen anak langsung dari container. Item inilah yang ditempatkan ke dalam sel.

/* Container: pemilik aturan grid */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* Item: anak langsung otomatis jadi grid item */
.container > div {
  background: #eef;
  padding: 20px;
}

Kata kunci penting: anak langsung. Kalau kamu bungkus item di dalam elemen lain, elemen pembungkus itulah yang jadi grid item, bukan isi di dalamnya. Ini sumber kebingungan klasik — grid-mu “tidak jalan” padahal sebenarnya jalan, cuma yang ditata bukan elemen yang kamu kira. Konsep container-item ini dibahas step-by-step di materi dasar CSS Grid, cocok kalau kamu mau latihan sambil langsung praktik di editor.

grid-template-columns dan grid-template-rows

Dua properti inilah jantung dari CSS Grid. grid-template-columns menentukan berapa banyak kolom dan seberapa lebar masing-masing; grid-template-rows melakukan hal yang sama untuk baris. Setiap nilai yang kamu tulis, dipisah spasi, mendefinisikan satu track (jalur) beserta ukurannya.

.container {
  display: grid;
  /* 3 kolom: 200px, sisa ruang, lalu 100px */
  grid-template-columns: 200px 1fr 100px;
  /* 2 baris: tinggi 80px lalu 240px */
  grid-template-rows: 80px 240px;
}

Bayangkan ini seperti mendikte garis. grid-template-columns: 200px 1fr 100px berarti: gambar kolom pertama selebar 200px, kolom kedua ambil semua sisa ruang, kolom ketiga selebar 100px. Jumlah nilai menentukan jumlah track. Kamu bisa memakai satuan apa pun: px, %, em, rem, fr, auto, atau min-content/max-content.

Kalau kamu hanya mendefinisikan kolom tapi item lebih banyak dari yang muat di satu baris, Grid otomatis membuat baris baru. Baris tambahan ini disebut implicit rows, dan ukurannya diatur lewat grid-auto-rows:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px; /* setiap baris baru otomatis 150px */
  gap: 12px;
}

Ini pola yang sangat umum: kamu cukup mengurus kolom, dan biarkan baris tumbuh sendiri seiring bertambahnya konten. Nilai grid-auto-rows: auto (default) membuat setiap baris setinggi konten terpanjang di baris itu — sering kali persis yang kamu mau untuk daftar kartu.

Satuan fr — Fraction

fr adalah satuan khusus Grid yang membagi ruang tersedia secara proporsional. Satu fr berarti “satu bagian dari sisa ruang yang tersisa”. Ini yang membuat grid terasa fleksibel tanpa perlu hitung-hitungan persen manual.

Tips: fr mirip seperti flex-grow di Flexbox. 1fr 2fr artinya “bagi ruang jadi 3 bagian — kolom 1 dapat 1 bagian, kolom 2 dapat 2 bagian”.

Kelebihan fr dibanding persen: fr menghitung ruang setelah gap dan track berukuran tetap dikurangi. Kalau kamu tulis grid-template-columns: 200px 1fr 1fr dengan gap: 20px, dua kolom 1fr akan membagi rata ruang yang benar-benar tersisa — 200px dan semua gap sudah dipotong duluan. Coba lakukan itu dengan persen, kamu pasti kena overflow karena 50% + 50% + 200px + gap lebih dari 100%.

/* fr menangani sisa ruang dengan benar */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar tetap, konten mengisi sisa */
  gap: 24px;
}

gap — Jarak antar item

gap mengatur jarak antar baris dan kolom sekaligus dengan satu properti. Ini jauh lebih bersih daripada menempel margin di tiap item, karena gap hanya muncul di antara sel — tidak ada jarak nyasar di tepi luar grid.

.container {
  gap: 16px;           /* baris dan kolom sama */
  row-gap: 24px;       /* atau atur terpisah */
  column-gap: 12px;
}

Dulu orang memakai trik margin negatif untuk menghilangkan jarak di tepi. Dengan gap, masalah itu lenyap total. Dan kabar baiknya, gap sekarang juga bekerja di Flexbox, jadi begitu kamu terbiasa di Grid, kamu bisa memakainya di mana-mana.

repeat() dan minmax()

Dua fungsi ini adalah alat yang membuat CSS Grid naik kelas dari “rapi” ke “responsif”. repeat() menyingkat pengulangan track; minmax() memberi track batas bawah dan batas atas sekaligus. Digabung, keduanya jadi resep grid responsif tanpa media query.

repeat(jumlah, ukuran) menggantikan penulisan berulang. repeat(12, 1fr) sama dengan menulis 1fr sebanyak dua belas kali — inilah dasar dari grid 12 kolom yang dipakai banyak framework:

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

minmax(min, max) mengatur agar track tidak pernah lebih kecil dari min dan tidak pernah lebih besar dari max. Contohnya minmax(280px, 1fr) berarti “minimal 280px, tapi kalau ada ruang lebih, boleh melar mengisi sisa”:

.cards {
  display: grid;
  /* kolom minimal 280px, maksimal mengisi sisa ruang */
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 16px;
}

Gabungan repeat() + minmax() + kata kunci auto-fill/auto-fit inilah yang jadi bintang utama di bagian responsif nanti. Untuk sekarang, cukup ingat: repeat untuk mengulang, minmax untuk memberi batas. Kalau kamu mau melihat efeknya secara visual, coba geser-geser nilai di playground grid interaktif Hyper Sheets yang juga menunjukkan bagaimana subgrid mewarisi track dari parent.

grid-template-areas

grid-template-areas membiarkan kamu mendesain layout secara visual dengan “menggambar” nama area langsung di CSS. Alih-alih menghitung nomor garis, kamu memberi nama tiap wilayah, lalu menyusunnya seperti peta ASCII. Ini opsional, tapi untuk page layout hasilnya sangat mudah dibaca.

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Lihat bagaimana kata header ditulis dua kali di baris pertama — itu artinya area header membentang penuh melintasi dua kolom. Baris kedua membagi sidebar dan main. Baris ketiga, footer melebar penuh lagi. Kamu benar-benar bisa “melihat” bentuk halaman hanya dari membaca string area-nya. Untuk membuat sel kosong, pakai satu titik atau lebih (.) sebagai gantinya.

Kalau grid-template-areas masih terasa abstrak, coba latihan grid-template-areas yang membiarkan kamu menyusun area layout secara visual dan langsung melihat hasilnya di preview.

Cara Menggunakan CSS Grid: Langkah demi Langkah

Cara menggunakan CSS Grid selalu mengikuti alur yang sama: pilih elemen pembungkus, jadikan grid, definisikan kolom, atur jarak, lalu isi dengan item. Begitu kamu hafal urutan ini, membuat grid apa pun jadi refleks. Berikut lima langkahnya dengan contoh nyata.

Langkah 1 — Siapkan struktur HTML. Grid butuh satu container dan beberapa anak langsung. Sederhana saja:

<div class="galeri">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Langkah 2 — Aktifkan grid. Beri container display: grid. Sampai di sini belum ada perubahan visual karena kita belum mendefinisikan kolom.

.galeri {
  display: grid;
}

Langkah 3 — Definisikan kolom. Tentukan berapa kolom dan lebarnya. Kita mulai dengan tiga kolom sama rata.

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

Langkah 4 — Beri jarak. Tambahkan gap supaya item tidak menempel satu sama lain.

.galeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Langkah 5 — Rapikan item. Tambahkan sedikit gaya pada item supaya terlihat.

.item {
  background: #4f46e5;
  color: white;
  padding: 32px;
  border-radius: 8px;
  text-align: center;
}

Selesai. Enam item tadi sekarang tersusun rapi dalam grid 3 kolom, dan begitu itemnya jadi tujuh, item ketujuh otomatis pindah ke baris baru. Kamu baru saja membuat grid pertamamu dengan lima langkah. Kalau kamu ingin latihan interaktif yang menyenangkan, coba game Kebun Grid — kamu menata tanaman di kebun dengan properti CSS Grid persis seperti yang barusan.

Mini-Project: Membuat Dashboard Layout

Sekarang gabungkan semuanya jadi satu layout dashboard lengkap. Dashboard adalah contoh sempurna kekuatan Grid dua dimensi: ada header di atas, sidebar di kiri, area konten utama, panel statistik, dan footer. Kita akan pakai grid-template-areas supaya strukturnya terbaca jelas.

Mulai dari HTML:

<div class="dashboard">
  <header class="d-header">Dashboard Saya</header>
  <aside class="d-sidebar">Menu</aside>
  <main class="d-main">Konten Utama</main>
  <section class="d-stats">Statistik</section>
  <footer class="d-footer">Footer</footer>
</div>

Lalu CSS-nya. Perhatikan bagaimana peta area membuat layout langsung “kelihatan” tanpa perlu menghitung baris atau kolom secara manual:

.dashboard {
  display: grid;
  grid-template-columns: 220px 1fr 300px;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    stats"
    "footer  footer  footer";
  gap: 12px;
  min-height: 100vh;
  padding: 12px;
}

.d-header  { grid-area: header; }
.d-sidebar { grid-area: sidebar; }
.d-main    { grid-area: main; }
.d-stats   { grid-area: stats; }
.d-footer  { grid-area: footer; }

/* sedikit gaya biar enak dilihat */
.dashboard > * {
  background: #f1f5f9;
  border-radius: 8px;
  padding: 16px;
}

Struktur ini stabil dan mudah diubah. Mau sidebar lebih lebar? Ganti 220px jadi 260px. Mau panel statistik pindah ke bawah konten di layar kecil? Kamu tinggal menulis ulang grid-template-areas di dalam satu media query — dan karena setiap elemen sudah punya nama area, kamu tidak perlu menyentuh HTML sama sekali. Inilah kenapa grid-template-areas begitu disukai untuk layout aplikasi.

Di dalam masing-masing sel dashboard, kamu masih bebas memakai Flexbox untuk menata isinya — misalnya deretan tombol di header atau daftar menu di sidebar. Grid mengurus rangka besar, Flexbox mengurus komponen kecil. Kombinasi ini adalah cara profesional membangun layout, dan kami bahas kapan tepatnya memakai masing-masing di Flexbox vs Grid.

Menempatkan Item: grid-column dan grid-row

Selain menyusun otomatis, kamu bisa menempatkan item secara manual ke sel tertentu memakai grid-column dan grid-row. Keduanya bekerja berdasarkan nomor garis (grid line), bukan nomor sel. Grid dengan 3 kolom punya 4 garis vertikal: garis 1 di paling kiri, garis 4 di paling kanan.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* item ini membentang dari garis kolom 1 sampai 3 (2 kolom) */
.featured {
  grid-column: 1 / 3;
  grid-row: 1 / 3; /* dan 2 baris ke bawah */
}

Ada cara singkat memakai span, yang sering lebih intuitif karena kamu memikirkan “berapa sel yang mau ditempati”, bukan “dari garis mana ke garis mana”:

.featured {
  grid-column: span 2; /* tempati 2 kolom mulai dari posisi otomatisnya */
  grid-row: span 2;    /* dan 2 baris */
}

Teknik ini yang membuat layout gallery bergaya “masonry” atau “bento box” jadi gampang: satu item ditandai sebagai unggulan dan membentang dua kali lebih besar dari tetangganya, sementara item lain mengisi celah secara otomatis. Item yang tidak diberi posisi eksplisit akan mengalir ke sel kosong berikutnya — perilaku ini disebut auto-placement.

Responsive Grid Tanpa Media Query

Ini fitur paling ajaib di CSS Grid: kamu bisa membuat grid yang otomatis menyesuaikan jumlah kolom mengikuti lebar layar, tanpa menulis satu pun media query. Rahasianya ada di kombinasi repeat(), kata kunci auto-fill atau auto-fit, dan minmax().

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

Baca pelan-pelan: repeat(auto-fill, minmax(280px, 1fr)) berarti “buat sebanyak mungkin kolom, di mana tiap kolom minimal 280px dan maksimal 1fr”. Saat layar lebar, muat lima atau enam kolom. Saat layar menyempit, jumlahnya berkurang otomatis jadi tiga, dua, lalu satu kolom di ponsel. Kartu wrap sendiri ke baris baru begitu ruang tidak cukup. Nol media query, dan layout langsung adaptif di semua ukuran layar.

Perbedaan auto-fill vs auto-fit — ini sering bikin bingung, jadi mari perjelas:

• auto-fill mempertahankan kolom kosong. Kalau item cuma dua tapi ruang muat lima kolom, tetap ada lima “slot” — dua terisi, tiga kosong. Item tidak melebar.
• auto-fit meruntuhkan kolom kosong dan membiarkan item melar mengisi seluruh baris. Dua item bisa membentang penuh selebar container.

/* item melebar mengisi ruang saat sedikit */
.cards-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

Untuk katalog produk yang jumlah kartunya banyak, auto-fill biasanya terasa lebih rapi. Untuk hero section dengan dua-tiga kartu yang ingin mengisi lebar penuh, auto-fit lebih pas. Coba keduanya dan lihat mana yang cocok dengan kontenmu.

Media query tetap punya tempat, terutama saat kamu ingin mengubah struktur layout secara drastis di breakpoint tertentu — misalnya mengganti seluruh grid-template-areas dari tiga kolom jadi satu kolom di ponsel. Untuk itu, pahami cara kerja media queries. Dan untuk kasus di mana komponen harus beradaptasi terhadap lebar container-nya sendiri (bukan lebar layar), pelajari container queries — pasangan modern yang melengkapi Grid dengan sangat baik.

Pattern yang Wajib Dihafal

Sebagian besar layout nyata cuma variasi dari segelintir pattern. Hafalkan yang berikut ini dan kamu bisa membangun 90% tampilan web tanpa mikir ulang. Semuanya cukup beberapa baris CSS.

Layout halaman klasik (header, sidebar, main, footer):

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Responsive card grid (tanpa media query!):

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

Ini salah satu pattern paling powerful di CSS — card otomatis wrap ke baris baru saat tidak cukup ruang, tanpa satu pun media query.

Gallery dengan item unggulan yang besar:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.gallery .featured {
  grid-column: span 2;
  grid-row: span 2;
}

Grid untuk memusatkan satu elemen (centering paling ringkas di CSS):

.pusat {
  display: grid;
  place-items: center;   /* horizontal + vertikal sekaligus */
  min-height: 100vh;
}

place-items: center adalah cara tersingkat memusatkan sesuatu di CSS — satu baris untuk dua sumbu. Kalau kamu memakai utility framework seperti Tailwind, semua pattern ini punya padanan class-nya sendiri; kami bahas di panduan Tailwind CSS kalau kamu lebih suka menulis layout lewat class.

Flexbox vs Grid — Kapan Pakai Yang Mana?

Aturan singkatnya: Flexbox untuk satu dimensi, Grid untuk dua dimensi. Kalau kamu menata benda dalam satu baris atau satu kolom, pakai Flexbox. Kalau kamu butuh mengontrol baris dan kolom bersamaan, pakai Grid. Keduanya bukan saingan — mereka pasangan.

Aturan simpel: kalau layout-nya cuma satu arah, pakai Flexbox. Kalau butuh kontrol baris DAN kolom, pakai Grid. Keduanya bisa — dan sering — dikombinasikan: Grid untuk rangka halaman, Flexbox untuk komponen di dalam tiap sel. Kalau kamu masih ragu memilih, baca perbandingan lengkapnya di Flexbox vs Grid, dan pastikan fondasi Flexbox-mu kuat lewat panduan memahami Flexbox.

Kesalahan Umum Pemula

Grid itu ramah, tapi ada beberapa jebakan yang hampir semua pemula alami. Kenali dulu supaya kamu bisa langsung melompatinya alih-alih menghabiskan sejam bertanya “kok nggak jalan?”.

1. Pakai Grid untuk segala hal. Grid powerful, tapi Flexbox lebih simpel untuk layout satu dimensi. Kalau kamu cuma menata deretan tombol horizontal, Flexbox lebih ringkas. Jangan pakai Grid kalau Flexbox sudah cukup.
2. Menata elemen yang salah. Grid hanya menata anak langsung container. Kalau item-mu dibungkus <div> perantara, yang tertata adalah pembungkusnya, bukan isinya. Cek struktur HTML-mu kalau grid berperilaku aneh.
3. Lupa beda auto-fill vs auto-fit. auto-fill menyisakan kolom kosong, auto-fit melebarkan item untuk mengisi ruang. Untuk card grid responsif, auto-fill biasanya yang kamu mau; salah pilih bisa bikin dua kartu tiba-tiba membentang selebar layar.
4. Tidak pakai minmax(). repeat(3, 1fr) bagus tapi kaku — di layar sempit tiga kolom jadi terlalu ciut. repeat(auto-fill, minmax(280px, 1fr)) jauh lebih fleksibel dan responsif tanpa media query.
5. Bingung grid-template-areas. Ini opsional tapi sangat membantu keterbacaan. Pakai untuk page layout, skip untuk grid sederhana. Kalau masih terasa abstrak, coba latihan grid-template-areas yang menyusun area secara visual.
6. Mengira % sama dengan fr. Persen dihitung dari lebar total container termasuk gap, jadi 50% + 50% + gap gampang overflow. fr menghitung sisa ruang setelah gap dan track tetap dipotong, jadi tidak pernah bikin layout meluber. Kalau ragu, pilih fr.
7. Lupa memberi tinggi pada baris. Kalau isi sel kosong dan kamu tidak set grid-template-rows atau grid-auto-rows, baris bisa gepeng setinggi konten. Set tinggi baris eksplisit kalau kamu butuh area dengan ukuran pasti.

FAQ CSS Grid

Apa bedanya CSS Grid dan Flexbox? CSS Grid adalah layout dua dimensi (mengatur baris dan kolom sekaligus), sedangkan Flexbox satu dimensi (satu baris atau satu kolom saja). Grid cocok untuk rangka halaman dan dashboard; Flexbox cocok untuk menata komponen dalam satu arah seperti navbar. Keduanya sering dipakai bersamaan — Grid di luar, Flexbox di dalam. Detailnya ada di artikel Flexbox vs Grid.

Apakah CSS Grid sudah aman dipakai di semua browser? Ya. Semua browser modern — Chrome, Firefox, Safari, dan Edge — sudah mendukung CSS Grid penuh sejak bertahun-tahun lalu. Kamu bisa memakainya di produksi tanpa polyfill. Fitur yang lebih baru seperti subgrid perlu dicek dukungannya, tapi Grid dasar sudah universal.

Apa itu satuan fr di CSS Grid? fr (fraction) adalah satuan yang membagi sisa ruang yang tersedia secara proporsional. 1fr 1fr berarti dua kolom sama rata; 1fr 2fr berarti kolom kedua dua kali lebih lebar dari yang pertama. Kelebihannya, fr menghitung ruang setelah gap dan track berukuran tetap dipotong, jadi tidak pernah bikin overflow seperti persen.

Bagaimana cara membuat grid responsif tanpa media query? Pakai grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). Formula ini membuat kolom sebanyak yang muat, dengan lebar minimal 280px dan maksimal mengisi sisa. Jumlah kolom otomatis menyesuaikan lebar layar — banyak di layar lebar, sedikit di ponsel — tanpa satu pun media query. Ganti auto-fill jadi auto-fit kalau kamu ingin item melebar mengisi baris saat jumlahnya sedikit.

Kenapa grid saya tidak berubah setelah menulis grid-template-columns? Kemungkinan besar kamu lupa menulis display: grid di container, atau elemen yang kamu tata bukan anak langsung. grid-template-columns hanya berpengaruh setelah container punya display: grid, dan hanya menata anak langsung — bukan cucu. Cek dua hal itu dulu.

Apakah saya perlu belajar Flexbox dulu sebelum Grid? Tidak wajib, tapi sangat membantu. Banyak konsep Grid (container vs item, gap, alignment) mirip dengan Flexbox, jadi belajar keduanya saling memperkuat. Kalau kamu baru mulai, kuasai dasar Flexbox dulu untuk layout satu dimensi, lalu naik ke Grid untuk yang dua dimensi.

Langkah Selanjutnya

Setelah paham Grid dan Flexbox, kamu sudah punya fondasi layout yang kuat — dua alat ini menutupi hampir semua kebutuhan tata letak web modern. Langkah berikutnya: dalami Responsive Design dengan kombinasi media query, clamp(), dan container query untuk layout yang benar-benar adaptif di semua perangkat.

Di Hyper Sheets, kamu bisa latihan Grid sambil bermain game Kebun Grid — atur tanaman di kebun dengan properti CSS Grid. Sudah tamat? Lanjut ke Sawah Grid Lanjutan untuk level yang lebih menantang. Dan kalau belum coba, mainkan juga Kodok Flexbox untuk memastikan fondasi Flexbox-mu solid sebelum melangkah lebih jauh.