CSS GRID

Pengertian Grid

Grid dalam CSS adalah sistem tata letak dua dimensi yang digunakan untuk mengatur kolom dan baris dalam halaman web. CSS Grid dapat membagi halaman web menjadi beberapa bagian, baik secara horizontal maupun vertikal. 


Fungsi Grid


CSS Grid memiliki beberapa fungsi, di antaranya:

  • Membuat struktur halaman web yang responsif dan fleksibel 
  • Mendefinisikan hubungan ukuran, posisi, dan lapisan antara bagian-bagian kontrol 
  • Memudahkan developer untuk membuat layout dari design yang telah dibuat 
  • Sangat bagus dalam mengatur gambar yang besar 

Praktek Grid


1. Grid Layout 

Code:



2. Grid Element 

Code : 

3. Inline Grid

Code : 



4. Column Gap

Code :





5. Row Gap 

Code : 






Komentar