Praktik CSS Grid

by oktaviardi pratama

HTML

<!-- 1. Grid 2x2 Sederhana -->
    <h3>1. Grid Layout 2x2 (Sama Rata)</h3>
    <div class="grid-2x2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>

    <!-- 2. Grid 3x3 Kompleks -->
    <h3>2. Grid Layout 3x3 (Dengan Area Khusus)</h3>
    <p>Perhatikan bagaimana Header melebar penuh, Sidebar memanjang ke bawah, dan kotak Orange besar di tengah.</p>

    <div class="grid-3x3">
        <!-- Item ini akan menempati seluruh baris pertama -->
        <div class="box item-header">Header (Span All Columns)</div>

        <!-- Item standar mengisi urutan berikutnya -->
        <div class="box">Kiri Atas</div>

        <!-- Item ini dipaksa menjadi besar di tengah -->
        <div class="box item-big">Konten Utama (Big)</div>

        <!-- Item ini dipaksa memanjang vertikal di kanan -->
        <div class="box item-sidebar">Sidebar (Tinggi)</div>

        <div class="box">Kiri Bawah</div>
        <div class="box">Footer Kanan</div>
    </div>

CSS

body { font-family: sans-serif; padding: 20px; background: #f4f4f4; }
        h3 { margin-top: 30px; border-bottom: 2px solid #333; padding-bottom: 5px; }

        .box {
            background: #3498db; color: white;
            padding: 20px; text-align: center;
            font-weight: bold; font-size: 1.2rem;
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
        }

        /* --- CONTOH 1: GRID 2x2 SEDERHANA --- */
        .grid-2x2 {
            display: grid;
            /* 2 kolom dengan lebar sama (50% masing-masing) */
            grid-template-columns: 1fr 1fr;
            /* 2 baris dengan tinggi otomatis sesuai konten */
            grid-template-rows: auto auto;
            gap: 15px; /* Jarak antar kotak */
            background: #fff;
            padding: 15px;
            border-radius: 8px;
        }

        /* --- CONTOH 2: GRID 3x3 DENGAN ITEM SPESIAL --- */
        .grid-3x3 {
            display: grid;
            /* 3 kolom: Kecil, Besar, Kecil */
            grid-template-columns: 1fr 2fr 1fr;
            /* 3 baris tingginya 100px */
            grid-template-rows: 100px 100px 100px;
            gap: 10px;
            background: #fff;
            padding: 15px;
            border-radius: 8px;
        }

        /* Manipulasi Item Khusus di Grid 3x3 */
        .item-header {
            background: #e74c3c;
            /* Baris 1, Kolom 1 s/d 4 (span semua kolom) */
            grid-column: 1 / -1;
        }

        .item-sidebar {
            background: #2ecc71;
            /* Baris 2 s/d 4, Kolom 3 */
            grid-row: 2 / 4;
            grid-column: 3 / 4;
        }

        .item-big {
            background: #f39c12;
            /* Menggunakan grid-area shorthand: row-start / col-start / row-end / col-end */
            /* Baris 2, Kolom 2, sampai Baris 3, Kolom 3 (Membentuk kotak besar di tengah) */
           ...