1. Apa perbedaan utama grid dengan flexbox?
- Grid memberikan kemampuan kontrol baris dan kolom sedangkan flexbox hanya satu diantara keduanya
- Flexbox lebih powerful dibanding grid
- Flexbox lebih cocok digunakan untuk layout dengan skala besar
- Semua jawaban benar
Pembahasan: CSS Grid dikembangkan setelah kemunculan CSS Flexbox, dengan maksud agar kekurangan dalam mengatur layout menggunakan flexbox dapat ter-cover oleh CSS Grid. Dengan Grid kita dapat mengontrol dua dimensi: kolom dan baris dengan mudah. Hal yang tidak kita temui ketika menggunakan flexbox yang hanya dapat kita kontrol satu dimensi saja.
2. Istilah lain dari grid track?
- Kolom dan baris
- Garis dan jarak kosong
- grid shorthand
- grid-area
Pembahasan: Grid track merupakan istilah lain dari kolom dan baris pada CSS Grid. Membentang secara vertical(kolom) atau horizontal(baris).
3. Bagaimana cara membuat grid container dengan 4 kolom masing-masing 200px dan baris dengan panjang 200px, 300px,1fr?
- a
.container {
display: grid;
grid-template: 200px 300px 1fr / repeat(4, 200px);
}
- b
.container {
display: grid;
grid-template: repeat(4, 300px) / 200px 300px 1fr;
}
- c
.container {
display: grid;
grid-template-columns/rows: repeat(4, 200px) / 200px 300px 1fr;
}
- d
.container {
display: grid;
grid-template: repeat(4, 200px / 200px 300px 1fr);
}
Pembahasan: Untuk membuat 4 kolom dengan ukuran sama 200px, kita dapat menggunakan ukuran masing-masing 200px, 300px, dan 1fr dapat kita tuliskan dengan grid-template-rows: 200px 300px 1fr;
Kita juga bisa menggabungkan kedua property tersebut menggunakan shorthand grid-template seperti berikut:
grid-template: 200px 300px 1fr / repeat(4, 200px);
