1. Apa Itu Grid Layout? CSS Grid Layout adalah model tata letak dua dimensi yang memungkinkan Anda untuk mendesain halaman web dengan baris dan kolom. Grid Layout memberikan kontrol penuh untuk membuat tata letak yang kompleks dengan sedikit kode.
2. Elemen Utama Grid Layout Grid Layout terdiri dari dua elemen utama:
- Grid Container: Elemen induk yang memiliki properti
display: grid;. - Grid Items: Elemen anak yang berada di dalam grid container.
Contoh Dasar:
.container {
display: grid;
}3. Properti Grid Container Grid container memiliki beberapa properti penting:
grid-template-rowsdangrid-template-columns: Menentukan jumlah dan ukuran baris serta kolom.
.container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr;
}1frberarti mengambil 1 bagian dari ruang yang tersedia.2frberarti mengambil 2 bagian dari ruang yang tersedia.
gap: Menentukan jarak antara baris dan kolom.
.container {
gap: 20px;
}grid-template-areas: Memberikan nama pada area grid untuk penempatan elemen yang lebih mudah.
.container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}4. Properti Grid Items Setiap elemen dalam grid container dapat memiliki properti berikut:
grid-rowdangrid-column: Menentukan elemen berada di baris atau kolom mana.
.item {
grid-row: 1 / 2;
grid-column: 1 / 3;
}grid-area: Menempatkan elemen berdasarkan nama area yang didefinisikan digrid-template-areas.
.header {
grid-area: header;
}5. Contoh Praktis: Membuat Tata Letak dengan Grid HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>CSS (style.css):
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-rows: 100px 1fr 50px;
grid-template-columns: 200px 1fr;
gap: 10px;
height: 100vh;
}
.header {
grid-area: header;
background-color: lightblue;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: lightcoral;
padding: 10px;
}
.main {
grid-area: main;
background-color: lightgreen;
padding: 10px;
}
.footer {
grid-area: footer;
background-color: lightgoldenrodyellow;
text-align: center;
}Hasil:
- Header akan berada di bagian atas dengan lebar penuh.
- Sidebar di sebelah kiri, dan konten utama di sebelah kanan.
- Footer berada di bagian bawah dengan lebar penuh.
6. Kombinasi Grid dengan Media Query Anda dapat membuat tata letak responsif dengan media query.
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-rows: auto;
grid-template-columns: 1fr;
}
}Kesimpulan: Pada seri ini, Anda telah mempelajari cara menggunakan Grid Layout untuk membuat tata letak yang kompleks. Dengan kombinasi Flexbox dan Grid, Anda memiliki kontrol penuh atas desain halaman web Anda. Selamat mencoba!
Tinggalkan komentar: