Grid (CSS Grid)

CSS Grid Layout adalah sistem layout dua dimensi yang menangani baris dan kolom secara bersamaan. Berbeda dengan Flexbox yang satu dimensi, Grid bisa mengatur layout kompleks seperti dashboard, gallery foto, dan magazine-style layouts. Container ditandai dengan display: grid. Property utama: grid-template-columns (definisi kolom — repeat(3, 1fr), repeat(auto-fit, minmax(200px, 1fr))), grid-template-rows (definisi baris), gap (jarak antar cell), grid-area (penamaan area). Grid juga mendukung implicit grid (item yang melebihi definisi otomatis ditambahkan), dan subgrid (nested grid yang mengikuti grid parent).

Contoh Kode

/* CSS Grid untuk dashboard */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr; /* Sidebar + konten */
  grid-template-rows: 60px 1fr;      /* Header + konten */
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

.sidebar { grid-area: sidebar; }
.header  { grid-area: header; }
.main    { grid-area: main; }