CSS Grid adalah sistem tata letak yang luar biasa berdasarkan kisi-kisi di web yang sangat menyederhanakan implementasi tata letak yang kompleks dan responsif. Meskipun float dan bahkan flexbox sebagian besar bersifat satu dimensi, Tata Letak CSS Grid adalah sistem dua dimensi, yang berarti berhubungan dengan baris dan kolom. Mempelajari CSS Grid dapat sangat membantu Anda untuk membuat tata letak yang modern dan efektif. Pada artikel ini, kami akan menjelaskan komponen utama CSS Grid agar Anda bisa langsung mempraktikkannya.
Apa itu CSS Grid?
CSS Grid adalah sebuah modul dalam CSS yang cocok untuk mengatur konten pada halaman web. Grid, yang merupakan fitur CSS3, memberikan pengembang cara untuk dapat membuat tata letak dengan baris dan kolom. Kelas ini akan memungkinkan Anda untuk mendesain untuk berbagai ukuran dan resolusi layar, memberi Anda tingkat kontrol dan fleksibilitas tertinggi.
Sumber: mukhlismj.com
Terminologi Utama
Sekarang, kita bisa masuk ke beberapa properti CSS Grid, tapi pertama-tama kita perlu menetapkan beberapa terminologi dasar:
- Wadah Grid: Elemen yang memiliki tampilan: grid yang diterapkan padanya. Hal ini membuat grid pada kontainer ini di mana semua anak langsungnya adalah item grid.
- Item Grid: Item dari wadah grid yang Anda letakkan di dalam struktur spesifik grid.
- Garis kisi: Garis pemisah horizontal dan vertikal yang membuat struktur kisi.
- Grid Tracks (Trek Kisi): Baris kisi dan kolom kisi.
- Sel kisi: Perpotongan antara baris dan kolom; unit terkecil dalam kisi-kisi.
- Area Kisi: Area persegi panjang pada kisi yang dibatasi oleh setidaknya empat garis kisi.
Properti Inti dari Kisi CSS
Beberapa Properti Dasar CSS Grid adalah sebagai berikut -
1. display: grid
Properti ini digunakan untuk membuat elemen menjadi wadah kisi. Sebagai contoh:
.container {
display: grid;
}
2. grid-template-baris & grid-template-kolom
Properti tersebut berhubungan dengan baris dan kolom grid. Ukuran dapat ditetapkan, relatif (persentase), atau unit fr dapat digunakan untuk menerapkan proporsi yang fleksibel.
Contoh:
.container {
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
}
3. spasi-kisi
Mengatur spasi antara baris dan kolom, sebagai singkatan dari row-gap dan column-gap:
.container {
grid-gap: 20px;
}
4. grid-area
Ini memungkinkan Anda untuk menentukan di mana sebuah item harus berada di dalam grid, baik dengan area yang diberi nama atau pemosisian eksplisit.
Contoh:
.item {
grid-area: 1 / 2 / 3 / 4;
}
membenarkan dan menyelaraskan konten
Memungkinkan Anda untuk mengontrol bagaimana seluruh grid disejajarkan di dalam wadahnya.
Mengapa Menggunakan CSS Grid?
Anda menggunakan CSS Grid ketika kebutuhan tata letak Anda bersifat dua dimensi, yaitu Anda membutuhkan kontrol yang tepat untuk kedua dimensi tersebut. Hal ini sangat berguna ketika Anda perlu membuat tata letak yang berbeda pada halaman seperti pada dasbor, galeri gambar, atau halaman pemasaran dengan beberapa bagian.
Keuntungan dari CSS Grid:
- Kesederhanaan: Meminimalkan kebutuhan akan pustaka atau solusi eksternal.
- Responsif: Menyesuaikan secara cerdas dengan ukuran tampilan yang berbeda.
- Kekuatan: Alat untuk penyelarasan dan pemerataan ruang kosong di grid.
Kesimpulan
Tata letak CSS Grid adalah alat desain web yang kuat yang memberdayakan para pengembang untuk membuat tata letak yang dinamis, responsif, dan indah. Mempelajari fitur-fitur inti dan fungsionalitas CSS Grid akan membuka wilayah desain web baru untuk Anda, memberikan Anda hasil yang luar biasa dengan mudah sambil mempercepat alur kerja Anda. Jelajahi dengan contoh-contoh, bermain-main, dan biarkan sistem grid membentuk kembali proses desain Anda!
Kembali ke>> CSS Grid vs Flexbox: Memilih Sistem Tata Letak yang Tepat