Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Layout dengan 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 <a href='https://codepen.io/moyicat/pen/qaWPba '>https://codepen.io/moyicat/pen/qaWPba </a>
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 )
2. Pada Desktop view Layoutnya dibagi menjadi 3 kelompok yaitu bagian ---1. div A, B, C, D, E kita sebut kelompok-1 ---2. div F kita sebut Kelompok-2 ---3. div G, dan H kita sebut kelompok-3
3. Lebar Layout dibagi menjadi 9 bagian ---1. Kelompok-1 (div A-E) mendapat 5 bagian ---2. div F mendapat 2 bagian ---3. Kelompok-2 (G dan H) mendapat 2 bagian juga
4. Kelompok-1 (5/9 Lebar Total Layout) : ---1. div A mengambil porsi 2 / 5 Lebar Kelompok-1 ---2. div B mengambil porsi 3 / 5 Lebar Kelompok-1 ---3. 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. ---4. E mengambil porsi 4 / 5 Lebar Kelompok-1.
5. Kelompok-2 : div F merajai kolom dengan lebar 2 / 9 lebar layout.
6. Kelompok-3 : div G dan H didalam satu kolom dengan lebar 2/9 lebar layout, dan G dan H memiliki perbandingan tinggi 3 : 1.
7. Jarak antar div 20px.
8. Masing masing kelompok memiliki height = 480px.
9. 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>
</div>
</div>
serius, gitu doang kita ga butuh div-div tambahan buat nge-wrap yang kita bagian-bagian yang kita kelompokkin tadi. coba bandingkan sama text HTML versi aslinya :
<div class="wrap">
<h2 class="title">
Complex layout with flex box
</h2>
<button class="btn-show">Toggle Border</button>
<div class="container card">
<div class="flex row structure">
<div class="flex row structure-1">
<div class="flex element a">
<div class="content">
A
</div>
</div>
<div class="flex element b">
<div class="content">
B
</div>
</div>
<div class="flex col structure-1-2-1">
<div class="flex element c">
<div class="content">
C
</div>
</div>
<div class="flex element d">
<div class="content">
D
</div>
</div>
</div>
<div class="flex element e">
<div class="content">
E
</div>
</div>
</div>
<div class="flex row structure-2">
<div class="flex element f">
<div class="content">
F
</div>
</div>
<div class="flex col structure-2-2">
<div class="flex element g">
<div class="content">
G
</div>
</div>
<div class="flex element h">
<div class="content">
H
</div>
</div>
</div>
</div>
</div>
</div>
</div>
dari sini saya udah merasa cinta ketika menggunakan grid dibanding flexbox dalam membuat layout. tapi kita perlu tahu lebih dalam lagi, bagaimana dengan cssnya, jangan-jangan kodenya rumit ? langsung aja kalau begitu kita menuju bagian cssnya.
tenang-tenang jangan takut dulu, emang untuk pertama kali pasti akan keliatan ribet, tapi asli ini bakalan gampang nantinya.
Sama seperti flexbox, yang memiliki flex container dan flex item, grid juga memiliki 2 komponen penting, yaitu grid container dan grid item.
1. kita tentukan kelas .card menjadi grid-container dan div A-H menjadi grid-items 2. Kita perlu declare kalau class card akan menggunakan grid sistem sebagai containernya, dengan display: grid.
.card {
display: grid;
}
3. Setiap grid item, kita tentukan nama area item tersebut dengan menggunakan grid-area property. Nama area ini fungsinya akan kita lihat pada step berikutnya, yaitu untuk memposisikan pada grid yang akan kita buat nantinya. Biar ngga bingung langsung aja masing-masing grid-item kita tentukan grid-areanya.
.kotak-a {
grid-area: a;
}
.kotak-b {
grid-area: b;
}
.kotak-c {
grid-area: c;
}
.kotak-d {kotak-
grid-area: d;
}
.kotak-e {
grid-area: e;
}
.kotak-f {
grid-area: f;
}
.kotak-g {
grid-area: g;
}
.kotak-h {
grid-area: h;
}
4. Pada intinya dengan grid property, kita akan membuat kotak-kotak atau grid pada grid-container. Seperti apa bentuk kotak-kotak / gridnya, bisa ditentukan dengan grid-template-columns dan grid-template-row. di kasus ini kita mau buat 9 bagian dengan lebar yang sama, maka kita buat grid-template-columns dengan value repeat(9, 1fr). 1fr disini mirip sama kaya flex-grow, yang maksudnya free space akan dibagian secara merata kepada kolom yang menggunakan unit fr. contoh,
.card {
display: grid;
grid-template-columns: 200px 1fr 3fr 100px;
grid-gap: 20px;
height: 480px;
}
maka container akan memiliki 4 kolom dengan lebar 200px diujung kiri, 100px diujung kanan, sisa free space dibagi 4, 1 untuk kolom (1fr) dan 3 untuk kolom (3fr). maka hasilnya akan seperti ini :
layout diatas tidak sesuai, mari kita ubah value grid-template-columns-nya agar sesuai seperti yang kita inginkan
.card {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;// bisa juga seperti ini, dengan alasan simplicity maka kita pakai repeat saja
grid-template-row: none; //ditulis maupun tidak, akan sama saja hasilnya.
}
5. Untuk grid-template-row sementara ini kita biarkan dahulu, yang berarti secara default valuenya adalah none. Maka row akan menyesuaikan secara otomatis.
6. Sebelumnya kita telah memberi “nama” setiap grid-item dengan menggunakan property grid-area pada langkah ketiga, dan pada langkah 4 dan 5 kita “menggambar” grid / kotak2 dengan menggunakan grid-template-columns dan grid-template-rows. Sekarang kita tinggal memposisikan grid-item pada template yang telah kita buat dengan menggunakan grid-template-areas.
.card {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;// bisa juga seperti ini, dengan alasan simplicity maka kita pakai repeat saja
grid-template-row: none; //ditulis maupun tidak, akan sama saja hasilnya.
grid-template-areas:
"a a b b b f f g g"
"a a b b b f f g g"
"c e e e e f f g g"
"d e e e e f f h h";
}
dengan begitu secara otomatis, akan terbentuk grid 9 columns dan 4 row. dan setiap grid item yang sudah ditentukan “nama” grid-area akan secara otomatis menempati sesuai dengan apa yang sudah kita tentukan pada grid-template-areas.
7. Dengan grid-gap maka secara otomatis setiap kotak akan memiliki gutter sesuai valuenya, kali ini kita ingin 20px. 8. Sekaligus kita define tinggi dari grid-container .card sebesar 480px.
.card {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;// bisa juga seperti ini, dengan alasan simplicity maka kita pakai repeat saja
grid-template-row: none; //ditulis maupun tidak, akan sama saja hasilnya.
grid-template-areas:
"a a b b b f f g g"
"a a b b b f f g g"
"c e e e e f f g g"
"d e e e e f f h h";
grid-gap: 20px;
height: 480px;
}
Hasil Akhir akan seperti ini :
9. Selanjutnya kita tambahkan breakpoint untuk max-width 768px, dan kita tentukan ulang grid-template-colums , grid-templates row, dan grid-template-areas-nya
@media (max-width: 768px) {
.card {
grid-template-columns: repeat(5, 1fr); /* free space pada lebar layout dibagi 5 sama rata */
grid-template-areas:
"a a b b b"
"c e e e e"
"d e e e e"
"f f f f f"
"g g g g g"
"h h h h h";
}
.kotak-a,
.kotak-b,
.kotak-e{
height: 240px;
} /*dengan menentukan tinggi kotak e sebesar 240px, maka secara otomatis kotak c dan kotak d memiliki setengah tinggi kotak e*/
.kotak-f {
height: 480px;
}
.kotak-g {
height: 360px;
}
.kotak-h {
height: 120px;
}
}
hasi akhirnya bisa dilihat dilihat di pen saya disini <a href='https://codepen.io/danangyudhatama/pen/zPVJMP?editors=1100 '>https://codepen.io/danangyudhatama/pen/zPVJMP?editors=1100 </a>.
Setelah diuji dengan serangkaian tes, grid cukup mudah digunakan, mungkin butuh waktu untuk transisi. Tapi, kita butuh lebih banyak uji coba agar benar-benar terbukti bahwa grid memang lebih cocok untuk membuat layout.
bisa juga dibaca disini <a href=' https://paper.dropbox.com/doc/CSS-grid-vs-Flexbox-3LhVOzOMh7hZPImlnpGvO?_tk=share_copylink '> https://paper.dropbox.com/doc/CSS-grid-vs-Flexbox-3LhVOzOMh7hZPImlnpGvO?_tk=share_copylink </a>
buat temen-temen yang mau kenalan sama saya, boleh add fb saya ya https://web.facebook.com/yudhatamadanang tak kenal maka tak sayang, mari kita jalin silaturahmi, biar rejeki kita lancar :))
2 Jawaban:
melihat tulisan anda, saya menjadi yakin untuk belajar grid
<div>halo @timelord. <br>jika menggunakan css grid, apa masih perlu menggunakan @media query?</div>
