Layout Responsif - Fixed Nav

by oktaviardi pratama

HTML

<div class="main-layout">
        
        <!-- Header dengan Sticky Position -->
        <header>
            <div class="header-content">
                <div class="logo">MyWebsite</div>
                <nav class="nav-menu">
                    <a href="#">Home</a>
                    <a href="#">About</a>
                    <a href="#">Services</a>
                    <a href="#">Contact</a>
                </nav>
            </div>
        </header>

        <!-- Konten dengan Grid 3 Kolom -->
        <main class="content">
            <div class="card">
                <h3>Kolom 1</h3>
                <p>Ini adalah konten kolom pertama. Scroll ke bawah untuk melihat header tetap di atas.</p>
            </div>
            <div class="card">
                <h3>Kolom 2</h3>
                <p>Ini adalah konten kolom kedua. Coba kecilkan layar untuk melihat perubahan layout.</p>
            </div>
            <div class="card">
                <h3>Kolom 3</h3>
                <p>Ini adalah konten kolom ketiga. Di mobile, semua kolom akan menjadi 1 baris vertikal.</p>
            </div>
            <!-- Tambah konten lebih banyak untuk demo scroll -->
            <div class="card">
                <h3>Kolom 4</h3>
                <p>Konten tambahan agar halaman lebih panjang dan bisa di-scroll.</p>
            </div>
            <div class="card">
                <h3>Kolom 5</h3>
                <p>Konten tambahan agar halaman lebih panjang dan bisa di-scroll.</p>
            </div>
            <div class="card">
                <h3>Kolom 6</h3>
                <p>Konten tambahan agar halaman lebih panjang dan bisa di-scroll.</p>
            </div>
            <!-- Tambah konten lebih banyak untuk demo scroll -->
            <div class="card">
                <h3>Kolom 7</h3>
                <p>Konten tambahan agar halaman lebih panjang dan bisa di-scroll.</p>
            </div>
            <div class="card">
 ...

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: Arial, sans-serif;
            background: #f4f4f4;
        }

        /* --- GRID LAYOUT UTAMA --- */
        .main-layout {
            display: grid;
            grid-template-rows: auto 1fr auto; /* Header, Content, Footer */
            min-height: 100vh;
        }

        /* --- HEADER (Flexbox) --- */
        header {
            background: #2c3e50;
            color: white;
            padding: 15px 30px;
        }
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }
        .logo { font-size: 24px; font-weight: bold; }
        .nav-menu { display: flex; gap: 20px; }
        .nav-menu a { color: white; text-decoration: none; }
        .nav-menu a:hover { text-decoration: underline; }

        /* --- KONTEN (Grid 3 Kolom) --- */
        .content {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 kolom sama besar */
            gap: 20px;
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 20px;
        }
        .card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .card h3 { color: #2c3e50; margin-bottom: 10px; }
        .card p { color: #666; line-height: 1.6; }

        /* --- FOOTER (Flexbox) --- */
        footer {
            background: #2c3e50;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .footer-content {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }
        .footer-content a { color: #ecf0f1; text-decoration: none; }

        /* ---...