Latihan 1: Grid: Dasar — CSS
Latihan 1 dari materi Grid: Dasar di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Enam kotak biru masih bertumpuk, satu kotak per baris. Susun jadi grid tiga kolom sama lebar, dua baris.
Bikin rule .grid di dalam <style> dengan:
display: grid
grid-template-columns: repeat(3, 1fr) (boleh juga ditulis 1fr 1fr 1fr, artinya sama)
gap: 16px
Hint
- Yang diatur itu pembungkusnya, div dengan class grid. Kotak-kotak di dalamnya ikut tertata sendiri.
- display: grid menyalakan grid, grid-template-columns menentukan jumlah dan lebar kolom, gap memberi celah.
- .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }