Grid vs Flexbox

CSS merupakan komponen (atau bisa kita sebut sebagai bahasa pemrograman) wajib dalam pemrograman web yang erat kaitannya dengan User interface. Dengan menggunakan CSS kita dapat memberikan style pada komponen HTML sehingga web yang sedang kita bangun dapat dikustomisasi dengan mudah, termasuk layouting dari web tersebut.

Jika kita membahas tentang layout mungkin kita pernah mendengar istilah Grid dan Flexbox. Ya, keduanya bisa dibilang metode atau template untuk membuat layout pada sebuah web. Namun timbul pertanyaan

1. Apa perbedaan diantara keduanya?
2. Lebih bagus mana jika diterapkan dalam membangun web?

Kita akan coba bahas satu-persatu pertanyaannya di-posting-an kali ini.

Grid

Bagi teman-teman yang pernah mencoba library bootstrap pasti familiar dengan class row dan column. Ya, bootstrap dibuat menggunakan metode grid yang memodelkan layout sebagai baris dan kolom (row and column) sehingga dalam pembuatan layout nya kita ‘membaca’ nya sebagai dua dimensi, yaitu row (kiri-kanan) dan column (atas-bawah).¹

Jika kita ingin membuat layout seperti pada gambar diatas, tentu akan mudah jika kita menggunakan grid sebagai metode layouting nya

Flex

Nah berbeda dengan Grid yang dimodelkan dengan row dan column (2D), Flex dimodelkan sebagai content sehingga dalam pembuatan layout, kita ‘membaca’ nya sebagai satu dimensi.¹

Misal pada awalnya kita memiliki menu dengan elemen div seperti gambar berikut. (Note: Elemen div secara default memiliki display block dan akan menghasilkan seperti gambar dibawah)

Elemen div pada menu

Lalu pada parent (kotak berwarna oranye) kita beri style flex, maka menu tersebut berubah menjadi gambar berikut

Elemen div setelah diberi style flex

Terlihat bahwa setiap item div akan berubah posisi dari vertikal menjadi horizontal akibat penerapan style flex.

Grid vs Flexbox

Menjawab pertanyaan diawal, ‘apa sih beda nya grid dan flexbox?’. Seperti yang telah dibahas sebelumnya, Grid merupakan pemodelan layout berbasis 2D (row dan column) sedangan Flexbox merupakan pemodelan layout berbasis 1D (content). Dapat dikatakan juga Flexbox sebagai pemodelan layout berbasis row.

Pada sub ini kita akan mencoba implementasi Grid dan Flexbox serta melihat perbedaan keduanya dengan studi kasus pembuatan menu navigasi.

Point nya adalah setiap elemen div yang ada di dalam elemen nav akan menempatkan dirinya sendiri tanpa harus ribet mengatur posisi atau pembagian layarnya.

Dengan kasus yang sama, kita coba membuatnya dengan menggunakan metode Grid.

Perbedaan mencolok antara Grid dan Flexbox dapat dilihat dari gambar berikut. Grid akan membagi satu elemen menjadi beberapa kolom (tergantung bagaimana kita definisikan pada grid-template-columns) dimana hal tersebut tidak terjadi pada saat kita menggunakan Flexbox

Pembagian kolom pada grid

Sehingga jika kita ingin memisahkan menu Sign In ke posisi paling kanan, kita harus mengetahui berapa total kolom dari elemen nav tersebut.

nav > div:nth-child(3) {
    grid-column: 10;
}

sedangkan pada Flexbox, kita cukup menambahkan margin-left:auto saja tanpa harus mengetahui berapa total kolom dari elemen nav nya.

Lebih bagus mana?

Ya simple aja, jawabannya ga ada yang bagus dan ga ada yang jelek. keduanya saling melengkapi dan tergantung bagaimana implementasi nya terhadap kasus. Keduanya dapat berdiri sendiri atau dapat juga dikombinasikan. Tapi, akan sulit jika kita membuat base layout menggunakan Flexbox saja atau Grid saja. Mengapa? karena Grid bersifat dua dimensi sehingga butuh lebih banyak code yang ditulis sedangkan Flexbox bersifat content sehingga akan sulit untuk maintain code nya.

Lalu?

Ya, kita dapat mengombinasikan keduanya dengan grid sebagai basenya, sedangkan flexbox digunakan untuk mengatur layout konten atau bagian terkecilnya, misalnya seperti pada menu navigasi tadi.

Kesimpulan

1. Grid merupakan metode layouting dua dimensi yang direpresentasikan dengan row dan column
2. Grid membagi satu layar (screen) menjadi beberapa kolom yang harus didefinisikan terlebih dahulu melalui css property grid-template-columns
3. Flexbox merupakan metode layouting satu dimensi dan berbasis pada content (item) itu sendiri yang dapat dikatakan sebagai item terkecil dari layout.
4. Baik flexbox maupun grid dapat digunakan secara independen maupun dikombinasikan. Namun lebih direkomendasikan untuk mengombinasikan keduanya dalam membuat base layout.

Baiklah sekian dulu tulisan tentang FE kali ini. Next saya akan coba bahas implementasi kombinasi Grid dan Flexbox dalam membuat layout web. 🙂🥂

Referensi, Inspirasi, dan Sumber

¹ The ultimate CSS battle: Grid vs Flexbox by Hackernoon.com

The ultimate CSS battle: Grid vs Flexbox