CSS Grid adalah sistem layout dua dimensi yang revolusioner untuk desain web. Berbeda dengan Flexbox yang hanya satu dimensi, Grid memungkinkan pengaturan baris dan kolom secara simultan.
Konsep Dasar CSS Grid
Grid Container: Elemen induk yang dideklarasikan dengan display: grid. Semua elemen di dalamnya secara otomatis menjadi grid items.
Grid Lines: Garis horizontal dan vertikal yang membagi grid. Anda bisa menempatkan item berdasarkan garis ini untuk kontrol posisi yang presisi.
Grid Areas: Area bernama dalam grid yang memudahkan penempatan item dengan properti grid-area.
Keunggulan CSS Grid
Dengan CSS Grid, Anda dapat membuat layout kompleks seperti magazine-style layouts, dashboard, dan gallery tanpa menggunakan framework CSS. Grid juga responsif secara native dengan unit fr (fraction) dan fungsi minmax().