Kalau Flexbox jago buat ngatur item dalam satu baris atau satu kolom, CSS Grid ini jagoannya buat ngatur layout yang lebih kompleks dalam dua dimensi (baris DAN kolom sekaligus).

CSS Grid: Jadi Arsitek Layout Dua Dimensi yang Handal!

Udah kenalan sama Flexbox yang jago ngatur item satu dimensi? Keren! Sekarang, gimana kalau kamu mau bikin layout yang lebih kompleks, kayak majalah atau koran, yang punya struktur baris DAN kolom yang jelas buat naro konten di mana aja? Nah, di sinilah CSS Grid Layout (atau sering disebut CSS Grid aja) unjuk gigi!

CSS Grid adalah sistem layout dua dimensi (baris dan kolom) yang super powerful dan fleksibel. Dia ngasih kita kontrol penuh buat nentuin gimana elemen-elemen anak (grid items) ditempatin di dalem sebuah "kisi-kisi" (grid) yang kita definisiin di elemen induknya (grid container). Ini bener-bener revolusioner buat bikin layout halaman web yang kompleks tanpa perlu trik-trik aneh.

Konsep Dasar CSS Grid: Container, Items, Lines, Tracks, Cells, Areas

Sama kayak Flexbox, ada dua pemain utama:

1. Grid Container (Kontainer Grid):

   • Elemen induk yang mau kita jadiin grid.
   • Cara ngaktifinnya: kasih properti display: grid; atau display: inline-grid; ke elemen induk.
     • display: grid;: Kontainer jadi elemen block.
     • display: inline-grid;: Kontainer jadi elemen inline.

2. Grid Items (Item-item Grid):

   • Anak-anak langsung dari Grid Container. Mereka otomatis jadi item yang bisa ditempatin di dalem grid.

Selain itu, ada beberapa istilah penting di Grid:

• Grid Lines (Garis Grid): Garis-garis horizontal dan vertikal yang ngebentuk struktur grid. Ada garis kolom dan garis baris. Garis ini dinomorin mulai dari 1.
• Grid Tracks (Jalur Grid): Ruang di antara dua Grid Line yang berdampingan. Ada jalur kolom (column tracks) dan jalur baris (row tracks). Ini yang kita definisiin ukurannya.
• Grid Cell (Sel Grid): Unit terkecil di grid, yaitu ruang yang dibatasin sama empat Grid Line (persimpangan antara satu jalur baris dan satu jalur kolom).
• Grid Area (Area Grid): Area persegi panjang yang bisa terdiri dari satu atau lebih Grid Cell. Kita bisa naro item di area tertentu.

(Sumber Gambar: CSS-Tricks - Ganti jika ada gambar yang lebih sesuai)

Properti buat Si Grid Container (Induk)

Properti ini diterapin ke elemen yang udah jadi Grid Container (display: grid;).

1. grid-template-columns dan grid-template-rows: Nentuin Ukuran Jalur Grid

   • Ini properti paling penting buat ngedefinisiin struktur kolom dan baris gridmu.
   • grid-template-columns: Nentuin jumlah dan ukuran jalur kolom.
   • grid-template-rows: Nentuin jumlah dan ukuran jalur baris.
   • Nilai Ukuran:
     • Panjang (px, em, % dari lebar/tinggi kontainer).
     • Keyword auto (ukuran ngikutin konten item).
     • Unit fr (Fraction Unit): Ini unit spesial di Grid yang ngewakilin satu bagian (fraksi) dari ruang sisa yang tersedia di kontainer. Super berguna buat bikin kolom/baris fleksibel! Misal, 1fr 1fr 1fr bikin 3 kolom sama lebar. 2fr 1fr bikin kolom pertama 2x lebih lebar dari kolom kedua.
     • Fungsi repeat(jumlah, ukuran): Buat ngulang ukuran jalur. Misal, repeat(3, 1fr) sama kayak 1fr 1fr 1fr. repeat(4, 100px) bikin 4 kolom masing-masing 100px.
     • Fungsi minmax(min, max): Nentuin rentang ukuran minimal dan maksimal buat jalur. Misal, minmax(100px, 1fr) artinya minimal 100px, tapi bisa tumbuh ngisi ruang sisa.

   .container {
       display: grid;
       /* 3 kolom: 100px, 1 fraksi, 2 fraksi (kolom ke-3 2x lebih lebar dari ke-2) */
       grid-template-columns: 100px 1fr 2fr; 
       /* 2 baris: 50px, lalu sisanya otomatis sesuai konten */
       grid-template-rows: 50px auto; 
       /* 4 kolom sama lebar */
       /* grid-template-columns: repeat(4, 1fr); */
   }

2. grid-template-areas: Ngasih Nama ke Area Grid (Layout Visual)

   • Ini cara yang intuitif banget buat nentuin layout pake nama-nama area.
   • Kamu definisiin nama-nama area pake string yang ngewakilin baris-baris grid. Tanda titik (.) bisa dipake buat nandain sel kosong.
   • Terus, kamu "nempelin" grid item ke nama area itu pake properti grid-area di itemnya.

   .container-layout {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr; /* 3 kolom */
       grid-template-rows: auto 1fr auto; /* header, main, footer */
       grid-template-areas: 
           "header header header"  /* Baris 1: header ngambil 3 kolom */
           "nav    main   sidebar" /* Baris 2: nav, main, sidebar */
           "footer footer footer"; /* Baris 3: footer ngambil 3 kolom */
       gap: 10px; /* Jarak antar area */
   }
   /* Nanti di itemnya: */
   /* .item-header { grid-area: header; } */
   /* .item-nav { grid-area: nav; } */
   /* ... dst ... */

3. gap (atau grid-gap - nama lama), row-gap, column-gap: Ngatur Jarak Antar Jalur

   • Nentuin ukuran "selokan" atau jarak antara jalur kolom dan jalur baris.
   • gap: nilai-row-gap nilai-column-gap; (kalau cuma satu nilai, dipake buat dua-duanya).
   • row-gap (atau grid-row-gap): Jarak antar baris.
   • column-gap (atau grid-column-gap): Jarak antar kolom.

   .container {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 20px 10px; /* Jarak antar baris 20px, antar kolom 10px */
       /* row-gap: 20px; */
       /* column-gap: 10px; */
   }

4. justify-items dan align-items: Ngatur Perataan Item di DALEM Selnya (Default buat Semua Item)

   • justify-items: Ngatur perataan item secara horizontal di dalem sel gridnya.
   • align-items: Ngatur perataan item secara vertikal di dalem sel gridnya.
   • Nilai umum: start, end, center, stretch (default buat align-items).

   .container {
       display: grid;
       /* ... definisi kolom/baris ... */
       justify-items: center; /* Semua item rata tengah horizontal di selnya */
       align-items: end;    /* Semua item nempel bawah vertikal di selnya */
   }

5. justify-content dan align-content: Ngatur Perataan KESELURUHAN Grid di Kontainer (Kalau Ukuran Grid Lebih Kecil dari Kontainer)

   • Ini mirip justify-content dan align-content di Flexbox, tapi buat grid.
   • Cuma ngefek kalau total ukuran semua jalur grid (kolom atau baris) lebih kecil dari ukuran kontainernya.
   • justify-content: Ngatur perataan grid secara horizontal di dalem kontainer.
   • align-content: Ngatur perataan grid secara vertikal di dalem kontainer.
   • Nilai: start, end, center, space-between, space-around, space-evenly, stretch.

   .container-luas {
       display: grid;
       width: 800px;
       height: 500px;
       grid-template-columns: repeat(3, 100px); /* Total lebar grid cuma 300px */
       grid-template-rows: repeat(2, 100px);    /* Total tinggi grid cuma 200px */
       
       justify-content: center; /* Gridnya jadi di tengah horizontal kontainer */
       align-content: space-around; /* Baris-baris gridnya didistribusiin vertikal */
   }

Properti buat Si Grid Items (Anak)

Properti ini diterapin ke anak-anak langsung dari Grid Container buat nentuin di mana dan gimana mereka ditempatin.

1. grid-column-start, grid-column-end, grid-row-start, grid-row-end: Nentuin Posisi Item Pake Nomor Garis

   • Ini cara paling dasar buat nempatin item. Kamu nentuin item itu mulai dari garis kolom/baris nomor berapa dan berakhir di garis kolom/baris nomor berapa.
   • Ingat, garis dinomorin dari 1.
   • Contoh: grid-column-start: 2; grid-column-end: 4; (item ngambil kolom dari garis 2 sampe sebelum garis 4, alias kolom 2 & 3).
   • Kamu juga bisa pake span buat nentuin berapa banyak jalur yang mau diambil. Misal, grid-column-end: span 2; (item ngambil 2 jalur kolom dari grid-column-start-nya).

   .item-satu {
       grid-column-start: 1;
       grid-column-end: 3; /* Ambil 2 kolom pertama */
       grid-row-start: 1;
       grid-row-end: 2;   /* Ambil baris pertama aja */
   }
   .item-dua {
       grid-column: 3 / span 2; /* Shorthand, mulai dari garis 3, ambil 2 kolom */
       grid-row: 2 / 4;         /* Shorthand, mulai dari garis 2, sampe sebelum garis 4 */
   }

2. grid-column dan grid-row: Shorthand buat Penempatan Kolom dan Baris

   • grid-column: start-line / end-line;
   • grid-row: start-line / end-line;
   • Ini shorthand buat properti-properti di atas.

3. grid-area: Nempatin Item ke Area Bernama (atau Pake Nomor Garis)

   • Kalau kamu udah definisiin grid-template-areas di kontainer, kamu bisa nempatin item ke area itu pake: grid-area: nama-area-yang-didefinisiin;
   • Atau, grid-area juga bisa jadi shorthand buat grid-row-start / grid-column-start / grid-row-end / grid-column-end.

   /* Di container: grid-template-areas: "header header" "sidebar main"; */
   .item-header { grid-area: header; }
   .item-sidebar { grid-area: sidebar; }
   .item-konten-utama { grid-area: main; }
    
   /* Atau pake nomor garis: */
   /* .item-lain { grid-area: 2 / 1 / 4 / 3; } (baris 2-3, kolom 1-2) */

4. justify-self dan align-self: Ngatur Perataan Item Individual di DALEM Selnya

   • Mirip justify-items dan align-items di kontainer, tapi ini buat satu grid item spesifik. Dia bisa "ngalahin" settingan di kontainer.
   • justify-self: Perataan horizontal item di dalem selnya.
   • align-self: Perataan vertikal item di dalem selnya.
   • Nilai: start, end, center, stretch (default buat align-self).

   .container {
       display: grid;
       justify-items: stretch; /* Default, item ngisi lebar sel */
       align-items: stretch;   /* Default, item ngisi tinggi sel */
   }
   .item-spesial-rata-kanan {
       justify-self: end; /* Item ini aja yang rata kanan di selnya */
   }
   .item-spesial-rata-tengah-vertikal {
       align-self: center; /* Item ini aja yang rata tengah vertikal di selnya */
   }

Kapan Pake Flexbox vs. Kapan Pake Grid?

Ini pertanyaan yang sering muncul. Gak ada jawaban "salah" atau "benar" mutlak, karena kadang bisa dikombinasiin juga (Grid buat layout utama halaman, Flexbox buat ngatur item di dalem satu area Grid). Tapi, ada panduan umumnya:

• Flexbox (Satu Dimensi):

  • Lebih cocok buat ngatur item dalam satu baris ATAU satu kolom.
  • Ideal buat komponen UI kayak menu navigasi, barisan tombol, alignment item di dalem kartu.
  • Fokusnya lebih ke distribusi konten di sepanjang satu sumbu.

• Grid (Dua Dimensi):

  • Lebih cocok buat ngatur layout halaman web secara keseluruhan yang punya struktur baris DAN kolom yang jelas.
  • Ideal buat bikin kerangka halaman (header, sidebar, main content, footer), galeri foto, atau layout apa pun yang butuh kontrol presisi di dua sumbu.
  • Fokusnya lebih ke penempatan item di area-area grid yang udah ditentuin.

Seringkali, kamu bakal pake keduanya barengan!

Contoh Kasus Sederhana Layout Halaman dengan Grid

<div class="wrapper-halaman">
    <header>Header</header>
    <nav>Navigasi</nav>
    <main>Konten Utama</main>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
</div>

.wrapper-halaman {
    display: grid;
    grid-template-columns: 1fr 3fr; /* Sidebar 1 bagian, Konten Utama 3 bagian */
    grid-template-rows: auto auto 1fr auto; /* Header, Nav, Main (fleksibel), Footer */
    grid-template-areas: 
        "header header"
        "nav    nav"
        "sidebar main"
        "footer footer";
    gap: 10px;
    min-height: 100vh; /* Biar footernya bisa nempel bawah kalau konten pendek */
}
 
header { grid-area: header; background-color: lightcoral; padding: 10px; }
nav { grid-area: nav; background-color: lightsalmon; padding: 10px; }
main { grid-area: main; background-color: lightblue; padding: 10px; }
aside { grid-area: sidebar; background-color: lightgreen; padding: 10px; }
footer { grid-area: footer; background-color: lightgray; padding: 10px; text-align: center; }

Dengan kode di atas, kamu udah bisa bikin layout halaman dasar yang responsif (karena pake unit fr).

CSS Grid itu bener-bener ngubah cara kita bikin layout di web. Awalnya mungkin propertinya keliatan banyak dan konsepnya agak beda, tapi begitu kamu "klik", kamu bakal ngerasain betapa enaknya ngatur layout pake Grid.

Sama kayak Flexbox, cara terbaik buat nguasain Grid adalah dengan banyak praktik dan visualisasi. Coba bikin layout-layout simpel dulu, terus tingkatkan kompleksitasnya. Browser DevTools juga punya inspektur Grid yang sangat ngebantu buat liat garis-garis dan area gridmu.