CSS grid vs Flexbox
Di artikel ini saya akan mencoba membuat ulang layout yang sebelumnya sudah dibuat dengan flexbox menggunakan css Grid. Pada intinya saya ingin membuktikan, apakah benar css grid ini emang lebih  cocok untuk membuat layout dibanding flexbox.

Oke langsung aja ke study kasusnya, kali ini saya akan me-remake layout dari codepen karya Samantha Zhang. Jadi kamu bisa lihat di link tersebut bagaimana layoutnya dibuat.

REVERSE ENGINEERING

Langkah pertama kita akan mencoba menafsirkan layout yang dibuat oleh Samantha Zhang itu, gimana sih maunya, lebar, tinggi dll, dengan cara melihat kodenya. Setelah saya lihat kodenya, maka saya dapat beberapa point, yaitu :

DESKTOP VIEW

  1. memiliki 8 div ( A - H )
  1. Pada Desktop view Layoutnya dibagi menjadi 3 kelompok yaitu bagian 
  1. div A, B, C, D, E kita sebut kelompok-1
  1. div F kita sebut Kelompok-2
  1. div G, dan H kita sebut kelompok-3
  1. Lebar Layout dibagi menjadi 9 bagian
  1. Kelompok-1 (div A-E) mendapat 5 bagian
  1. div F mendapat 2 bagian
  1. Kelompok-2 (G dan H) mendapat 2 bagian juga
  1. Kelompok-1 (5/9 Lebar Total Layout) :
  1. div A mengambil porsi 2 / 5 Lebar Kelompok-1
  1. div B mengambil porsi 3 / 5 Lebar Kelompok-1
  1. C dan D mengambil porsi 1 / 5 Lebar Kelompok-1,  secara vertical C dan D memiliki sama tinggi, dan total tinggi C + D sama dengan tinggi E.
  1. E mengambil porsi 4 / 5 Lebar Kelompok-1.
  1. Kelompok-2 :
  1. div F merajai kolom dengan lebar 2 / 9 lebar layout.
  1. Kelompok-3 :
  1. a. div G dan H didalam satu kolom dengan lebar 2/9 lebar layout, dan G dan H memiliki perbandingan tinggi 3 : 1.
  1. Jarak antar div 20px.
  1. Masing masing kelompok memiliki height = 480px.
  1. Setiap div memiliki min-width = 100px.

TABLET DAN MOBILE VIEW
  1. Dimulai dari 768px kebawah, div-div yang telah dikelompokkan diatas menjadi Kelompok 1, 2 dan 3 kali ini yang tadinya berbaris (horizontal), sekarang disusun kebawah (vertical)

CREATE LAYOUT FROM SCRATCH

Setelah selesai melakukan reverse engineering Layout, sekarang kita mulai membuat dari awal menggunakan grid css.

Tahap pertama kita buat HTMLnya ulang, karena dengan menggunakan grid , kita ga perlu wrapper-wrapper yang bikin HTML jadi kotor.

<div class="wrap">
  <div class="container card">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
    <div class="d">D</div>
    <div class="e">E</div>
    <div class="f">F</div>
    <div class="g">G</div>
    <div class="h">H</div>