MODUL BELAJAR HARI 10-11 — Belajar Grid CSS untuk Layout Website

Materi Hari Ini:

✅ Apa itu CSS Grid dan kapan menggunakannya?
✅ Struktur dasar Grid CSS.
✅ Membuat layout dengan beberapa kolom dan baris.
✅ Praktik: Membuat layout website sederhana dengan Grid.

1. Apa Itu CSS Grid?

CSS Grid adalah sistem layout yang memungkinkan kita mengatur elemen dalam bentuk baris dan kolom dengan lebih mudah. Keunggulan Grid CSS dibanding Flexbox:
✔️ Bisa mengatur baris dan kolom sekaligus.
✔️ Cocok untuk desain halaman utama atau dashboard.
✔️ Fleksibel dalam mengatur ukuran elemen.

2. Struktur Dasar Grid CSS

Buat file baru grid.html dan tambahkan kode ini:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Grid CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Website Grid CSS</h1>
    </header>

    <main class="grid-container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </main>

    <footer>
        <p>© 2025 Belajar Grid CSS - Cloudi 🚀</p>
    </footer>
</body>
</html>

3. Styling dengan CSS Grid

Tambahkan kode berikut ke style.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    margin: 0;
    padding: 0;
}

header {
    background-color: #004080;
    color: white;
    padding: 20px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Membuat 3 kolom */
    grid-gap: 10px; /* Memberikan jarak antar elemen */
    padding: 20px;
}

.box {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

footer {
    background-color: #002040;
    color: white;
    padding: 10px;
    margin-top: 20px;
}

4. PR Praktik Hari 10-11

✅ Coba ubah jumlah kolom menjadi 4!

Ganti grid-template-columns: repeat(3, 1fr); menjadi repeat(4, 1fr);.

✅ Buat layout seperti header, sidebar, content, dan footer!

Coba tambahkan elemen baru dan atur dengan grid-template-areas.

✅ Coba gabungkan Flexbox & Grid!

Buat bagian header dengan Flexbox dan main content dengan Grid.

Cari Blog Ini

Meureuno Website