Praktik Media Queries

by oktaviardi pratama

HTML

<h1>Demo Responsive Grid</h1>
    <p class="instruction">
        Lebarkan atau kecilkan jendela browser Anda.<br>
        Di atas 768px = <strong>3 Kolom</strong> | Di bawah 768px = <strong>1 Kolom</strong>
    </p>

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

CSS

/* Reset Dasar */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: sans-serif; background: #f0f2f5; padding: 20px; }

        h1 { text-align: center; margin-bottom: 20px; color: #333; }
        p.instruction { text-align: center; margin-bottom: 30px; color: #666; }

        /* --- CONTAINER GRID --- */
        .grid-container {
            display: grid;
            gap: 20px;
            max-width: 1000px;
            margin: 0 auto;

            /* DEFAULT (DESKTOP): 3 Kolom sama besar */
            grid-template-columns: repeat(3, 1fr);
        }

        /* --- ITEM BOX --- */
        .box {
            background: white;
            padding: 40px 20px;
            text-align: center;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            font-size: 1.2rem;
            font-weight: bold;
            color: #2c3e50;
            border-top: 5px solid #3498db;
            transition: transform 0.3s;
        }

        .box:hover {
            transform: translateY(-5px);
        }

        /* Warna berbeda tiap box agar jelas */
        .box:nth-child(1) { border-color: #e74c3c; }
        .box:nth-child(2) { border-color: #2ecc71; }
        .box:nth-child(3) { border-color: #f39c12; }
        .box:nth-child(4) { border-color: #9b59b6; }
        .box:nth-child(5) { border-color: #34495e; }
        .box:nth-child(6) { border-color: #1abc9c; }

        /* --- MEDIA QUERY (INTI MATERI) --- */
        /* Ketika lebar layar 768px atau kurang (Tablet & HP) */
        @media (max-width: 768px) {
            .grid-container {
                /* Ubah dari 3 kolom menjadi 1 kolom */
                grid-template-columns: 1fr;
            }

            h1 { font-size: 1.5rem; }
            p.instruction { font-size: 0.9rem; }
        }

        /* Tambahan: Untuk layar sangat kecil (< 480px) */
        @media (max-width: 480px) {
    ...