Panduan CSS Grid: Menguasai Tata Letak Dengan Properti Grid

Panduan CSS Grid: Menguasai Tata Letak Dengan Properti Grid
Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Memposisikan elemen pada halaman web bisa menjadi sangat rumit ketika bekerja dengan tata letak yang rumit. Di sinilah grid CSS berguna. Ini adalah sistem tata letak yang dirancang untuk menyederhanakan proses pembuatan tata letak yang kompleks.





Apa manfaatnya bagi Anda? Tidak seperti metode tata letak tradisional yang hanya memungkinkan Anda memposisikan elemen di baris atau kolom, kisi CSS menawarkan yang terbaik dari kedua dunia—pendekatan 2D menggunakan baris dan kolom.



Kontainer dan Item Grid

Anda dapat menerapkan properti kisi CSS ke dua tipe elemen utama: induk dan turunan. Saat Anda menyetel properti tampilan ke 'kisi' untuk elemen induk, elemen tersebut akan diubah menjadi wadah kisi. Setiap elemen anak dalam wadah kisi ini menjadi item kisi, mewarisi properti kisi yang diterapkan.





Berikut cara penyajiannya:

Kontainer Grid dengan empat item grid

Item grid juga bisa menjadi wadah grid. Anda kini dapat mengacu pada tata letak sebagai kisi bertumpuk—kisi di dalam kisi. Kontainer grid utama sekarang disebut sebagai grid luar, sedangkan kontainer item-berubah-grid menjadi grid dalam.



Masing-masing grid ini beroperasi secara independen satu sama lain, artinya properti yang ditetapkan untuk grid dalam tidak mempengaruhi tata letak grid luar, dan sebaliknya.

Berikut tampilannya:



Wadah kisi dengan empat item, wadah kisi bersarang dengan tiga item.

Menguasai hubungan antara wadah grid dan barang sangat penting membangun tata letak dua dimensi secara efektif.