Latihan 1: Grid Utilities — Tailwind CSS

Latihan 1 dari materi Grid Utilities di Tailwind CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Ubah <div id="grid"> yang sudah ada jadi kisi tiga kolom, cuma pakai class Tailwind.

Tambahkan class="grid grid-cols-3 gap-4" di <div id="grid">.
Biarkan tiga <div> di dalamnya, berisi A, B, dan C, seperti di kode awal.
Jangan tulis atribut style di mana pun.

Yang dicek:

#grid punya display: grid (dari class grid).
Kolomnya dibuat class grid-cols- diikuti angka, misalnya grid-cols-3, jadi grid-template-columns-nya berisi repeat(...).
Kodenya gak berisi atribut style="...".

gap-4 (jarak 16px) bikin selnya gak dempet. Bagus dipasang, tapi gak ikut dicek.

Hint

Wadahnya diubah jadi kisi lewat class di #grid, bukan lewat atribut style. Class pertama yang wajib ada adalah grid.
grid menyalakan Grid, grid-cols-3 membagi wadahnya jadi tiga kolom sama lebar, gap-4 memberi jarak 16px di antara selnya.
<div id="grid" class="grid grid-cols-3 gap-4"> <div>A</div> <div>B</div> <div>C</div> </div>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Grid Utilities — Tailwind CSS

Hint

Memperbarui Aplikasi