CSS Grid dan Flexbox telah mengekspos dunia opsi yang kuat dan fleksibel untuk membuat tata letak responsif di web. Namun demikian, perangkat-perangkat tersebut juga memiliki tantangan uniknya sendiri - terutama jika Anda seorang pemula. Jika Anda tidak memahami perilaku mereka, maka itu akan menciptakan bug yang membuat frustasi atau tata letak yang tidak berfungsi dengan baik. Pada bagian di bawah ini, kami akan mengulas kesalahan yang paling sering terjadi pada CSS Grid dan Flexbox dan cara memperbaikinya.
1. Menggunakan Grid dan Flexbox Tanpa Rencana
Jebakan
CSS Grid dan Flexbox dapat digunakan bersama-sama, ya - tetapi menggunakan keduanya tanpa memahami fungsi yang berbeda dari masing-masing dapat menghasilkan hasil yang tidak terduga. Flexbox sangat bagus untuk tata letak satu dimensi (baris atau kolom) sementara Grid lebih baik untuk bekerja dengan tata letak dua dimensi.
Sumber: webdesign.tutsplus.com
Pemecahan masalah
- Beri penjelasan singkat tentang tata letak Anda: Tentukan apakah tata letak berbasis baris atau kolom (seharusnya menggunakan Flexbox) atau lebih kompleks dalam bentuk dua dimensi (akan menggunakan Grid).
- Hindari duplikasi: Jika Grid memiliki kontrol atas kedua sumbu, aturan Flebox dapat menghasilkan tata letak yang tidak terselesaikan.
2. Masalah Limpahan yang Tak Terduga
Perangkap
Salah satu masalah yang lebih umum terjadi pada CSS Grid atau Flexbox [4] adalah konten yang melimpah. Hal ini lebih sering terjadi karena ukuran yang salah, terutama dengan unit fr di Grid atau flex-grow di Flexbox.
Pemecahan masalah
- Verifikasi ukuran anak: Di Grid, gunakan unit selain fr untuk kolom dan baris kecuali Anda benar-benar yakin tentang lebar masing-masing; Anda dapat kembali ke nilai otomatis atau piksel bila diperlukan.
- Batasi keluaran: anak kotak fleksibel dapat tumbuh untuk mengisi ruang yang tersedia, jadi gunakan flex-grow: 0 atau lebar maksimal pada anak fleksibel
- Periksa dengan Alat Pengembang: Anda Gunakan alat pengembang peramban Anda untuk melihat dimensi elemen dan menemukan di mana elemen tersebut meluap.
3. Item yang Tidak Sejajar
Jebakan
Ketika justify-content diatur ke tengah atau align-item ke kanan. Misalnya, wadah yang menggunakan satu sistem perataan dan elemen anak yang menggunakan sistem perataan lainnya adalah hal yang umum terjadi.
Pemecahan masalah
- Kenali sumbu-sumbunya: Ketika Anda menggunakan justify-content di Flexbox, ia akan meratakan berdasarkan sumbu utama, sedangkan jika Anda menggunakan align-items - ia akan bekerja berdasarkan sumbu silang. Grid menggunakan konsep yang sama namun ditata dalam baris dan kolom.
- Tentukan aturan yang jelas: pastikan properti perataan ditetapkan secara eksplisit dan bukannya kembali ke default. Sebagai contoh, align-self pada anak dapat mengalahkan aturan kontainer.
4. Kesenjangan dan Kebingungan Margin
Perangkap
Sebaliknya, gap menyebabkan ketidakkonsistenan dalam CSS Grid atau Flexbox dan tidak dapat digunakan dengan margin. Sebagai contoh, gap dapat secara tidak sengaja menggandakan spasi di antara item jika keduanya digunakan.
Pemecahan masalah
- Lewati margin: selalu gunakan gap sebagai gantinya dalam tata letak Tumpukan atau Grid / Flexbox Anda masih bisa menggunakan margin untuk spasi grup atau di sekitar tata letak.
- Untuk grid bersarang: celah tidak boleh bertumpuk kecuali jika diinginkan.
5. Memiliki Tata Letak Bersarang Terlalu Rumit
Perangkap
Grid dan wadah Flexbox yang bersarang, atau menjaring opsi Flex yang saling bertentangan tanpa hierarki yang jelas membuat dua hal tersebut menjadi tidak praktis dan tidak dapat diprediksi untuk diperbaiki.
Pemecahan masalah
- Lebih mudah dari yang di atas: Jika sesuatu tidak perlu berperilaku seperti tata letak vertikal, buatlah seperti itu dengan meratakan struktur tata letak. Minimal Bersarang Manfaatkan satu wadah Grid atau Flexbox, bukan beberapa wadah bersarang.
- Induk-Anak: Gunakan Konvensi penamaan Berikan nama kelas yang lebih jelas dan deskriptif untuk mengidentifikasi elemen kontainer induk dan anak.
- Gunakan subkisi: Hal yang hebat tentang CSS Grid adalah kemampuan untuk menggunakan subgrid (jika browser Anda mendukungnya) dan dapat dengan mudah menyederhanakan tata letak bersarang Anda.
6. Masalah Kompatibilitas Browser
Jebakan
Beberapa fitur (seperti subgrid di CSS Grid) tidak didukung di semua tempat. Hal ini menyebabkan tata letak rusak pada browser yang tidak menerapkannya (tanpa strategi fallback).
Pemecahan masalah
- Pengujian lintas browser: Pastikan untuk menguji tata letak Anda secara teratur di berbagai browser.
- Gunakan kueri fitur (@support) untuk membuat aturan fallback untuk properti yang tidak didukung oleh peramban.
- Merujuk ke sumber daya: Lihatlah situs web sumber daya seperti Can I Use untuk mengonfirmasi kompatibilitas berbagai properti Grid dan Flexbox.
7. Perlu Melupakan Perilaku Kisi-kisi Implisit
Perangkap
Di sinilah CSS Grid akan membuat baris dan kolom yang dibuat secara implisit di luar grid yang telah ditentukan secara eksplisit. Meskipun hal ini menawarkan banyak kemudahan, namun hal ini juga dapat menyebabkan tata letak yang tidak terduga jika tidak ditangani dengan benar.
Pemecahan masalah
- Tetapkan template grid yang tetap: Dengan template-baris-grid dan template-kolom-grid.
- Penempatan track: Jika track implisit Anda memerlukan ukuran, gunakan grid-auto-baris atau grid-auto-kolom untuk mengontrol ukurannya.
Kesimpulan
Baik CSS Grid & gaya Flexbox sangat kuat, tetapi untuk menggunakannya dengan benar, Anda harus mengetahui keunikan dan jebakan dari setiap tata letak. Sering kali, merencanakan tata letak Anda, mengujinya di seluruh browser dan memanfaatkan alat pengembang memungkinkan Anda untuk men-debug sebagian besar masalah. Dengan lebih banyak berlatih menggunakan alat-alat ini, Anda akan diperlengkapi untuk membuat desain responsif yang lebih rinci.
Kembali ke>> CSS Grid vs Flexbox: Memilih Sistem Tata Letak yang Tepat