𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
Berhentilah bertarung dengan layout CSS Anda.
Dulu saya menghabiskan waktu berjam-jam memperbaiki layout yang rusak dengan Flexbox. Saya mencoba membungkus item dalam satu baris, tetapi item terakhir malah melebar ke seluruh layar. Terlihat tidak rapi. Saya mencoba margin dan berbagai trik tambahan, tetapi tidak ada yang berhasil.
Kemudian saya mengubah pola pikir saya ke CSS Grid.
Perbedaannya sederhana:
- Flexbox adalah untuk layout satu dimensi. Gunakan untuk satu baris atau satu kolom saja.
- CSS Grid adalah untuk layout dua dimensi. Gunakan saat Anda perlu mengontrol baris dan kolom secara bersamaan.
Anggap Flexbox sebagai alat untuk tugas-tugas kecil. Anggap Grid sebagai alat untuk seluruh struktur halaman Anda.
Jebakan Flexbox: Saat Anda menggunakan Flexbox untuk galeri, item-item tersebut mungkin tidak sejajar dengan sempurna di setiap ukuran layar. Anda sering kali berakhir dengan item "orphan" yang merusak ritme desain Anda.
Solusi Grid: Dengan Grid, Anda dapat membuat galeri responsif hanya dalam satu baris kode.
Gunakan ini: display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Ini memberi tahu browser untuk memasukkan kolom 250px sebanyak mungkin. Browser yang akan menghitungnya untuk Anda. Tidak perlu menebak-nebak lagi. Tidak ada lagi baris yang rusak.
Contoh Dashboard: Membangun dashboard dengan sidebar, konten utama, dan footer sulit dilakukan dengan Flexbox. Anda sering kali membutuhkan kontainer bersarang dan kode yang berantakan agar footer dapat membentang di seluruh lebar layar.
Dengan Grid, Anda mendefinisikan track sekali saja: grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto;
Anda dapat memerintahkan footer untuk membentang dari kolom pertama hingga kolom terakhir hanya dengan satu perintah. Kode Anda menjadi bersih dan mudah dibaca.
Saran saya:
• Gunakan Flexbox untuk perataan sederhana di header atau tombol. • Gunakan Grid untuk layout halaman utama dan galeri yang kompleks. • Berhentilah membuat kontainer bersarang hanya untuk memperbaiki masalah layout. • Gunakan unit fr untuk mendistribusikan ruang dengan mudah.
Coba ini hari ini. Ambil komponen lama yang Anda buat dengan Flexbox. Tulis ulang menggunakan CSS Grid. Anda akan melihat kode Anda menjadi lebih pendek dan layout Anda menjadi lebih kuat.