CSS Grid: Sistem Tata Letak 2 Dimensi Modern

Bangun tata letak 2 dimensi kolom dan baris yang kompleks dengan CSS Grid, grid-template-columns, unit frasional (fr), dan fungsi auto-fit responsive.

Berbeda dengan Flexbox yang fokus pada 1 dimensi (hanya baris atau hanya kolom), CSS Grid mengontrol baris dan kolom secara simultan.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Kolom sama lebar */
  gap: 20px;
}