Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Penempatan Area Grid: Mendesain Layout dengan Kata-kata

Konsep utama dari properti ini adalah memberikan nama pada setiap elemen anak, lalu mengatur posisinya pada elemen induk.

1. Langkah 1: Memberi Nama (grid-area)

Pertama, kita harus memberikan identitas pada setiap elemen yang ingin kita susun menggunakan properti grid-area.

header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: konten; }
footer { grid-area: footer; }

2. Langkah 2: Menggambar Denah (grid-template-areas)

Pada elemen induk (container), kita tentukan bagaimana nama-nama tersebut disusun. Setiap baris diwakili oleh tanda kutip " ".

.container { display: grid; grid-template-columns: 250px 1fr; /* Kolom sidebar dan konten utama */ grid-template-areas: "header header" "sidebar konten" "footer footer";
}

3. Aturan Main yang Harus Diingat

• Bentuk Kotak: Sebuah area harus membentuk kotak atau persegi panjang yang sempurna. Anda tidak bisa membuat area berbentuk "L" atau "T".

• Nama yang Sama: Nama yang berulang akan menggabungkan sel-sel tersebut menjadi satu area yang membentang.

• Tanda Titik (.): Jika Anda ingin membiarkan sebuah sel kosong (tanpa konten), gunakan tanda titik.

  • Contoh: "header . header"

Tutorial: Membuat Layout Dashboard SatuMedia

Mari kita buat layout dashboard untuk aplikasi SatuMedia (riwara.id) yang memiliki Header, Sidebar, Area Konten Utama, dan Sidebar Iklan di sebelah kanan.

Struktur HTML

<div class="dashboard"> <header>Header Navigasiheader> <aside class="side-nav">Menu Utamaaside> <main class="main-feed">Daftar Beritamain> <aside class="ads-panel">Iklanaside> <footer>Footer @2026footer>
div>

Kode CSS

.dashboard { display: grid; grid-template-columns: 200px 1fr 150px; grid-template-rows: auto 1fr auto; gap: 15px; min-height: 100vh; /* Menyusun Layout secara visual */ grid-template-areas: "header header header" "side main ads" "footer footer footer";
} header { grid-are a: header; background: #3498db; }
.side-nav { grid-area: side; background: #ecf0f1; }
.main-feed { grid-area: main; background: #fff; }
.ads-panel { grid-area: ads; background: #f9f9f9; }
footer { grid-area: footer; background: #2c3e50; color: white; }

4. Keajaiban Responsif

Inilah bagian terbaiknya. Anda bisa mengubah total tata letak di layar mobile hanya dengan mengganti "gambar" denahnya tanpa perlu memusingkan float atau position.

@media (max-width: 768px) { .dashboard { grid-template-columns: 1fr; grid-template-areas: "header" "main" "side" "ads" "footer"; }
}

Tips Pro untuk Developer

1. Visualisasi Mudah: Membaca kode grid-template-areas jauh lebih mudah dipahami oleh rekan tim pengembang lain karena bentuknya yang menyerupai tampilan asli website.

2. Gunakan Gap: Jangan lupa gunakan gap agar area yang menempel tidak terlihat sesak.

3. Kombinasi dengan fr: Gunakan satuan fr untuk area utama (main) agar ia selalu mengambil sisa ruang paling banyak dibandingkan sidebar yang berukuran tetap.