Area Bernama
Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 33 dari 43.
Daripada menempatkan item menggunakan nomor baris, kamu bisa memberi nama pada bagian-bagian grid menggunakan property grid-template-areas. Cara ini cocok untuk membuat tata letak yang rapi dan mudah dibaca, terutama saat bekerja dengan beberapa bagian seperti header, sidebar, dan footer. Perhatikan contoh di bawah ini:
Kita mendefinisikan container dengan CSS Grid dan menggunakan grid-template-areas untuk membuat tata letak bernama:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}Setiap baris teks membentuk satu baris, dan setiap kata dalam baris tersebut menjadi bagian dari kisi. Jika kamu mengulang kata, area itu akan membentang lebih luas.
Setelah itu, cocokkan elemen HTML-mu dengan nama-nama tersebut seperti ini:
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
Tantangan
MudahBuat layout CSS grid untuk halaman web dasar dengan area berikut, seperti pada gambar di bawah ini:
Atur properti berikut pada selector .container:
displaymenjadigridgrid-template-columnsmenjadi1fr 3frgrid-template-rowsmenjadiauto 1fr autogrid-template-areasmenjadi:"header header""profile main""footer footer"
Tetapkan setiap elemen ke area yang sesuai. Misalnya, untuk .header, atur grid-area menjadi header.
Coba sendiri
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100vh;
gap: 10px;
/* Set up your grid container here */
}
.header {
/* Assign to header area */
background-color: #f1c40f;
padding: 20px;
}
.profile {
/* Assign to profile area */
background-color: #3498db;
padding: 20px;
}
.main {
/* Assign to main area */
background-color: #2ecc71;
padding: 20px;
}
.footer {
/* Assign to footer area */
background-color: #e74c3c;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="profile">Profile</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di Menguasai CSS
1Menguasai Selector, Kombinasi
PengantarSelector KeturunanSelector AnakSelector Saudara SebelahSelector Saudara UmumTantangan Rangkuman7Membangun dengan CSS Grid
Dasar-Dasar GridPenempatan Item dengan grid-rowArea BernamaTantangan RangkumanLatihan sendiri: Playground Web