CSSMateri CourseNusantech Academy

Pembahasan Quiz Grid

By 9 Juni 2020 No Comments

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);