Salah satu kemajuan penting CSS yang diperkenalkan di CSS3 adalah CSS Grid, yang memungkinkan pengembang untuk membuat format rancangan responsif yang rumit dengan lebih sedikit kode. CSS Grid adalah sistem tata letak dua dimensi, yang berarti dapat menangani baris dan kolom pada saat yang sama, tidak seperti teknik tata letak yang lebih lama seperti float atau inline-block. Karena itu, CSS Grid telah menjadi salah satu alat yang paling banyak digunakan dalam pengembangan web modern. Jadi, kapan sebaiknya Anda menggunakan CSS Grid dan bagaimana cara menggunakannya dengan benar? Baiklah, mari kita lihat kasus penggunaannya bersama dengan beberapa contoh dalam praktiknya.
Memahami CSS Grid
Sekarang sebelum kita masuk ke dalam kasus penggunaan, kita perlu memahami dasar-dasar CSS Grid. Ide dari CSS Grid sangatlah mudah, yaitu hanya membagi sebuah kontainer menjadi beberapa baris dan kolom untuk membuat sebuah grid. Anak-anak dari wadah grid kemudian dapat langsung ditempatkan ke dalam sel grid tertentu (area grid) atau dapat menjangkau beberapa baris / kolom.
Sumber: dibimbing.id
Ini adalah contoh tata letak grid sederhana:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
Pada contoh sebelumnya, kita memecah kontainer menjadi 3 kolom yang sama dan properti gap digunakan untuk menambahkan spasi di antara item dalam grid.
Kapan Menggunakan CSS Grid
CSS Grid sangat bagus digunakan ketika Anda perlu mengontrol baris dan kolom tata letak Anda. Berikut adalah beberapa kasus penggunaan di mana CSS Grid sangat berguna:
1. Membuat Tata Letak Responsif
CSS Grid Menyederhanakan Pembuatan Desain Responsif Sementara framework menggunakan breakpoint yang telah ditentukan sebelumnya, CSS Grid memberdayakan pengembang untuk membuat kisi-kisi yang berskala secara alami di seluruh ukuran layar.
Contoh:
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
Memiliki tata letak dua kolom dan menjadi satu kolom pada perangkat yang lebih kecil.
2. Membangun Tata Letak yang Kompleks
CSS Grid sangat cocok untuk membuat desain kompleks yang membutuhkan tumpang tindih atau asimetris seperti tata letak majalah, dasbor.
Contoh:
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 3fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
Properti area template grid memungkinkan pemetaan sederhana dari struktur yang rumit secara visual.
3. Mengganti Wadah Bersarang
Grid pada tata letak tradisional akan membutuhkan beberapa wadah bersarang, dan ini akan membuat markup membengkak. Namun CSS Grid memungkinkan Anda untuk menghilangkan hal ini karena semuanya dapat ditangani dengan adanya wadah grid tunggal.
Contoh:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
Ulangi(): Fungsi ini memungkinkan Anda untuk membuat tata letak sederhana tanpa membuat HTML Anda membengkak dengan terlalu banyak elemen bersarang.
4. Memusatkan Elemen dengan Mudah
CSS Grid - Sistem tata letak ini membuat pemusatan konten secara horizontal, vertikal, atau keduanya menjadi sangat sederhana.
Contoh:
.container {
display: grid;
place-items: center;
height: 100vh;
}
Ini dapat digunakan untuk memusatkan elemen secara vertikal dan horizontal, berguna untuk membuat halaman splash atau pesan kesalahan.
Merancang Galeri Gambar
Menurut pendapat saya, CSS Grid mudah digunakan untuk jenis konten tertentu; Misalnya, galeri foto dikenal sebagai proyek yang banyak gambarnya.
Contoh:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
Fungsi IsiOtomatis: galeri akan selalu mengisi ruang yang tersedia.
Kapan Tidak Menggunakan CSS Grid
CSS Grid adalah fitur yang sangat kuat, tetapi tidak selalu menjadi alat terbaik untuk tata letak Anda. Flexbox lebih sesuai untuk tata letak satu dimensi, seperti bilah navigasi atau menu sebaris. CSS Grid dan Flexbox saling melengkapi satu sama lain; mengetahui kapan harus menggunakan salah satu dari keduanya dapat membantu Anda memilih alat yang tepat untuk pekerjaan tersebut.
Kesimpulan
CSS Grid adalah modul tata letak revolusioner dalam CSS yang menyediakan kekuatan untuk membangun tata letak yang fleksibel, mudah dipelihara, dan indah untuk pengembangan web. Gunakanlah untuk tata letak dua dimensi yang rumit, desain responsif, dan ketika Anda menginginkan kontrol yang tepat untuk baris (horizontal) dan kolom (vertikal). Gunakan CSS Grid hari ini dan buat alur kerja Anda lebih cepat dan profesional.
Kembali ke>> CSS Grid vs Flexbox: Memilih Sistem Tata Letak yang Tepat