Kuis Frontend Web (Minggu 5)

Apa yang dimaksud dengan Grid Layout dalam desain web?

• Teknik untuk membuat elemen beranimasi.

• Teknik untuk membagi halaman web ke dalam baris dan kolom.

• Metode untuk membuat layout responsif menggunakan JavaScript.

• Sistem layout yang hanya digunakan untuk mobile.

Apa manfaat utama penggunaan grid dalam desain responsif?

• Menyusun elemen-elemen layout secara horizontal saja.

• Memudahkan elemen-elemen untuk diatur secara terstruktur dan konsisten.

• Menambah elemen-elemen visual pada halaman.

• Mengurangi ukuran file CSS.

Apa yang dimaksud dengan `Grid Container`?

• Elemen yang mengatur posisi font dalam grid.

• Elemen induk yang berfungsi sebagai wadah grid.

• Elemen yang menampung gambar dalam grid.

• Elemen anak yang berada di dalam grid.

Dalam CSS Grid, `Grid Item` mengacu pada:

• Elemen induk yang memuat grid.

• Elemen anak yang ditempatkan dalam grid container.

• Baris dalam grid container.

• Gambar dalam layout grid.

Properti `grid-template-columns: 1fr 2fr;` menghasilkan:

• Dua kolom dengan ukuran yang sama.

• Satu kolom dengan lebar penuh.

• Dua kolom di mana kolom pertama memiliki lebar 1 bagian dan kolom kedua 2 bagian.

• Tiga kolom dengan lebar berbeda.

Apa tujuan dari properti `grid-gap` dalam CSS Grid?

• Mengatur margin dari elemen grid container.

• Menambahkan jarak antara elemen-elemen grid.

• Mengatur posisi teks dalam grid.

• Menyembunyikan grid item.

Satuan `fr` dalam CSS Grid berfungsi untuk:

• Mengatur warna teks.

• Mengatur fraksi ruang dalam grid.

• Menentukan jumlah kolom grid.

• Menghapus elemen dalam grid.

Apa yang dimaksud dengan `repeat()` dalam CSS Grid?

• Fungsi untuk mengatur warna elemen grid.

• Fungsi untuk mengulang pola pengaturan grid track.

• Fungsi untuk menyusun elemen dalam satu kolom.

• Fungsi untuk menentukan lebar container.

Dengan kode `grid-template-columns: repeat(4, 1fr);`, berapa jumlah kolom yang dihasilkan?

• 2 kolom

• 3 kolom

• 4 kolom

• 5 kolom

Pada ukuran layar kecil, kita dapat mengubah layout menjadi satu kolom dengan media query. Manakah kode yang benar?

• `@media (max-width: 768px) { grid-template-columns: 1fr 1fr; }`

• `@media (max-width: 768px) { grid-template-columns: 1fr; }`

• `@media (min-width: 768px) { grid-template-columns: 3fr; }`

• `@media (max-width: 1000px) { grid-template-columns: 1fr 2fr; }`