Flexbox vs Grid : Choose your weapon
Keindahan adalah keharusan
Tampilan merupakan aspek penting dalam bentuk sebuah benda. Selain unsur kegunaan benda-benda yang diciptakan, manusia kini mempertibangkan aspek keindahan di dalamnya. Tampilan bisa menjadi factor pembeda yang kuat dalam produk.
Apple menjadi salah satu top of mind dalam hal ini. Selain keputusan bisnis dari stave jobs, keahliannya dalam mendesign produk menjadikakan produk-produk apple diminati sangat kuat oleh pelanggannya. Inovasi darinya sangat-sangat di tunggu oleh masyarakat tidak hanya yang berasal dari dunia teknologi bahkan awam pun rela mengantri untuk produknya.
Sebegitu pentingnya design ataupun tampilan sebuah produk, tidak lepas juga pada website. Design website yang ‘satisfying’ sudah menjadi standar umum pembuatan website beberapa tahun terakhir ini.
Mengahasilkan atau membuat website yang nyaman dimata dan rileks dipikiran menggunakan 2 metode yang saat ini juga menjadi perdebatan di keduanya. Mana yang terbaik. Seperti semua hal di dunia, perbandingan seperti sebuah jalan untuk memilih hanya satu dari yang lain. Padahal sungguh mengkombinasikan meruapakan jalan paling bijak.
Dua metode
Flexbox dan grid menjadi cara populer untuk mengatur tampilan laman website.
Keduanya pada dasarnya dapat menghasilkan bentuk tampilan yang sama. Apa yang bisa di buat dengan Flexbox hampir bisa dibuat menggunakan Grid. Perdebatan keduanya sebenarnya berakhir pada preferensi masing-masing developer. Yang telah terbiasa dengan flexbox akan menerapkannya dengan cepat dan efisien. Sehingga grid terasa sebuah penambahan dari CSS yang kurang berguna.
Namun bagi developer yang mendapatkan kenyamanan dalam Grid, merasa Flexbox adalah sebuah metode lama yang kurang mampu menangani perkembangan bentuk website saat ini.
Cara mencoba membuat bentuk tampilan yang serupa menggunakan Flexbox ataupun Grid.
- Flex box
Catatan : Flexbox menyelesaikan masalah umum
Ada satu hal yang memakan waktu dan kreatifitas tiap web design sebelum dapat ditambahkannya display ‘flex’ dalam design tag html. Umumnya digunakan tag div sebagai membungkus utama sebuah content.
Hal itu adalah , ‘bagaimana membuat child tepat berada ditengah parentnya secara vertical maupun horizontal’
2. grid
Memilih satu dari dua bukanlah keharusan. Mempergunakan kelebihan masing-masing pada tempat yang tepat menjadi pilihan terbaik. Lalu kapan waktu tepat untuk menerapkan yang satu daripada yang lain.
Bagaimana menentukan untuk memilih
Pertanyaan paling penting adalah bagaimana memilih diantaranya ? saat kapan memerlukan Flexbox ? dan kapan grid begitu sempurna untuk diterapkan ?
One vs two dimension
Pandangan satu dan dua dimensi menjadi perbedaan mencolok antar flexbox dan grid. Perbedaan struktur ini menjadi pertimbangan mendasar kapan memilih dinatara keduanya.
Jika kita hanya ingin mengatur sisi baris atau kolom dari content maka jawabannya adalah flexbox dan juga berarti flexbox hanya bekerja pada bidan satu dimensi.
Sedangkan grid berguna jika kita ingin mengatur bagian baris dan kolom secara bersamaan pada content, yang berarti grid menggunakan pendekatan dua dimensi.
Implementasi yang saya gunakan
Pada akhirnya kedua Teknik layouting ini bukanlah pilihan a atau b. penggabungan keduanya adalah cara terbaik untuk mengatur tampilan laman website. Grid saya gunakan untuk mengatur bagian bagian laman web utama. Kemudian di dalamya untuk mengatur bagian-bagian kecil atau item-item dari content saya gunakan metode flexbox.
Gambar implementasi
