CSS Grid adalah sistem tata letak dua dimensi yang memungkinkan kamu mengatur elemen secara baris dan kolom sekaligus. Berbeda dengan Flexbox yang bekerja satu dimensi, Grid sangat cocok untuk membuat layout halaman yang lebih kompleks seperti dashboard, galeri foto, atau struktur halaman penuh. Artikel ini akan membahas cara menggunakan CSS Grid dengan contoh nyata yang mudah dipahami.
Apa Itu CSS Grid?
CSS Grid Layout adalah modul CSS yang memberikan sistem grid berbasis baris dan kolom. Dengan Grid, kamu bisa menentukan ukuran kolom, baris, jarak antar sel, dan posisi setiap elemen dengan sangat presisi. Dukungan browser untuk CSS Grid sudah sangat baik — hampir semua browser modern mendukungnya.
Mengaktifkan CSS Grid
Sama seperti Flexbox, Grid diaktifkan dengan properti display:
.container {
display: grid;
}
Setelah ini, semua elemen anak langsung menjadi grid item.
Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:
Cara Menggunakan CSS Grid untuk Layout Responsif
Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.
Top comments (0)