Quiz tentang CSS Grid Layout

Apa itu CSS Grid Layout?

• Sistem tata letak statis

• Sistem tata letak tiga dimensi

• Sistem tata letak dua dimensi

• Sistem tata letak satu dimensi

Answer explanation

CSS Grid Layout adalah sistem tata letak dua dimensi yang memungkinkan pengaturan elemen dalam baris dan kolom, memudahkan desain responsif dan kompleks. Ini berbeda dari tata letak satu dimensi yang hanya mengatur elemen dalam satu arah.

Bagaimana cara mendefinisikan elemen HTML sebagai grid container?

• Dengan menetapkan properti display ke grid

• Dengan menetapkan properti display ke flex

• Dengan menetapkan properti display ke block

• Dengan menetapkan properti display ke inline

Answer explanation

Elemen HTML dapat didefinisikan sebagai grid container dengan menetapkan properti display ke grid. Ini memungkinkan penggunaan fitur layout grid untuk mengatur elemen anak dalam baris dan kolom.

Apa fungsi dari properti grid-template-columns?

• Menentukan ukuran kolom

• Menentukan ukuran baris

• Menambahkan jarak antar elemen

• Menempatkan elemen grid

Answer explanation

Properti grid-template-columns digunakan untuk menentukan ukuran kolom dalam layout grid. Dengan mengatur ukuran kolom, Anda dapat mengontrol bagaimana elemen-elemen dalam grid ditampilkan secara horizontal.

Apa yang dilakukan properti gap dalam CSS Grid?

• Menambahkan jarak antar kolom dan baris

• Menentukan ukuran kolom

• Menempatkan elemen grid

• Mengatur tata letak responsif

Answer explanation

Properti gap dalam CSS Grid digunakan untuk menambahkan jarak antar kolom dan baris, sehingga elemen grid tidak saling berdekatan. Ini membantu dalam menciptakan tata letak yang lebih teratur dan estetis.

Apa yang dimaksud dengan unit fr dalam CSS Grid?

• Unit tetap

• Unit proporsional

• Unit dinamis

• Unit absolut

Answer explanation

Unit fr dalam CSS Grid adalah unit proporsional yang digunakan untuk mendefinisikan ukuran elemen berdasarkan proporsi ruang yang tersedia. Ini memungkinkan desain yang responsif dan fleksibel.

Apa fungsi dari fungsi minmax() dalam CSS Grid?

• Menentukan area grid

• Menambahkan jarak antar elemen

• Mengulangi definisi kolom

• Menentukan ukuran minimum dan maksimum

Answer explanation

Fungsi minmax() dalam CSS Grid digunakan untuk menentukan ukuran minimum dan maksimum dari kolom atau baris. Ini memungkinkan elemen grid untuk beradaptasi dengan ukuran kontainer, menjaga tata letak yang responsif.

Apa yang dilakukan fungsi repeat() dalam CSS Grid?

• Menentukan ukuran kolom

• Menempatkan elemen grid

• Mengulangi definisi kolom atau baris

• Menambahkan jarak antar elemen

Answer explanation

Fungsi repeat() dalam CSS Grid digunakan untuk mengulangi definisi kolom atau baris, sehingga memudahkan dalam membuat layout yang konsisten tanpa harus menuliskan ukuran berulang kali.

Apa yang dimaksud dengan grid-template-areas?

• Menambahkan jarak antar elemen

• Mendefinisikan tata letak grid menggunakan nama area

• Menentukan ukuran kolom

• Menentukan ukuran baris

Answer explanation

Grid-template-areas digunakan untuk mendefinisikan tata letak grid dengan memberikan nama pada area tertentu. Ini memudahkan pengaturan posisi elemen dalam grid, sehingga pilihan ini adalah yang tepat.

Apa yang dilakukan properti grid-auto-flow?

• Menambahkan jarak antar elemen

• Menentukan ukuran kolom

• Menentukan bagaimana elemen grid ditempatkan

• Mengatur tata letak responsif

Answer explanation

Properti grid-auto-flow digunakan untuk menentukan bagaimana elemen grid ditempatkan dalam grid. Ini mengatur alur penempatan elemen, sehingga pilihan yang benar adalah 'Menentukan bagaimana elemen grid ditempatkan'.

Apa yang dimaksud dengan grid implicit?

• Baris dan kolom yang ditentukan secara eksplisit

• Baris dan kolom yang ditambahkan otomatis

• Area grid yang tidak terpakai

• Elemen grid yang tidak terdefinisi

Answer explanation

Grid implicit merujuk pada baris dan kolom yang ditambahkan otomatis oleh sistem saat elemen grid tidak memiliki posisi yang ditentukan secara eksplisit. Ini memungkinkan tata letak yang lebih fleksibel.