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
memiliki 8 div ( A - H )
Pada Desktop view Layoutnya dibagi menjadi 3 kelompok yaitu bagian
div A, B, C, D, E kita sebut kelompok-1
div F kita sebut Kelompok-2
div G, dan H kita sebut kelompok-3
Lebar Layout dibagi menjadi 9 bagian
Kelompok-1(div A-E) mendapat 5 bagian
div F mendapat 2 bagian
Kelompok-2(G dan H) mendapat 2 bagian juga
Kelompok-1(5/9 Lebar Total Layout) :
div A mengambil porsi 2 / 5 Lebar Kelompok-1
div B mengambil porsi 3 / 5 Lebar Kelompok-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.
E mengambil porsi 4 / 5 Lebar Kelompok-1.
Kelompok-2 :
div F merajai kolom dengan lebar 2 / 9 lebar layout.
Kelompok-3 :
a. div G dan H didalam satu kolom dengan lebar 2/9 lebar layout, dan G dan H memiliki perbandingan tinggi 3 : 1.
Jarak antar div 20px.
Masing masing kelompok memiliki height = 480px.
Setiap div memiliki min-width = 100px.
TABLET DAN MOBILE VIEW
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.
REVERSE ENGINEERING
CREATE LAYOUT FROM SCRATCH
<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>