Latihan 2: Grid: Areas — CSS
Latihan 2 dari materi Grid: Areas di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Susun layout pakai area bernama: Header di atas selebar dua kolom, Sidebar di kiri bawah, Content di kanan bawah.
- Di rule
.grid yang sudah ada, tambahkan petanya:
grid-template-areas: "header header" "sidebar content";
- Kasih tiap elemen nama areanya, dalam rule baru:
.header dengan grid-area: header.sidebar dengan grid-area: sidebar.content dengan grid-area: content
Hint
- Ada dua bagian: peta di pembungkus .grid, lalu nama area di tiap anaknya.
- grid-template-areas berisi satu string per baris, dan grid-area di tiap item menyebut nama areanya.
- .grid { ... grid-template-areas: "header header" "sidebar content"; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .content { grid-area: content; }
