Latihan 1 dari materi Grid: Areas di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Grid-nya punya dua kolom. Sekarang Header cuma mengisi kolom kiri, Sidebar di sebelahnya, dan Content turun sendirian ke baris kedua. Bikin Header melebar ke dua kolom, selebar grid-nya:
bikin rule .header di dalam <style> dengan grid-column: span 2
grid-column: 1 / 3 (atau 1 / -1) juga diterima, karena hasilnya sama. Hasilnya Header di atas sendirian, Sidebar dan Content berdampingan di bawahnya.
Hint
Header harus menempati dua kolom sekaligus, selebar grid-nya.
grid-column mengatur kolom yang ditempati item. Kata span artinya melebar sebanyak sekian kolom.
.header { grid-column: span 2; }
</>{ }.css=>#idfn()
Versi baru
HyperSheets
bagian dari BelajarWeb.dev
0%
Membuka gerbang…
HyperSheets
Memperbarui Aplikasi
Versi baru tersedia. Halaman akan dimuat ulang otomatis...