Demo CSS Layout Block

by oktaviardi pratama

HTML

<!-- 1. Block Elements -->
    <h3>1. Display: Block</h3>
    <p>Mulai baris baru & memenuhi lebar (walaupun kita set width 200px, mereka tetap turun ke bawah).</p>
    <div class="demo-block">
        <div class="box bg-blue">Box 1 (Block)</div>
        <div class="box bg-green">Box 2 (Block)</div>
        <div class="box bg-red">Box 3 (Block)</div>
    </div>

    <!-- 2. Inline Elements -->
    <h3>2. Display: Inline</h3>
    <p>Sejajar dalam satu baris. Properti width/height diabaikan.</p>
    <div class="demo-inline">
        <span class="box">Span 1</span>
        <span class="box">Span 2</span>
        <span class="box">Span 3 (Panjang sekali pun tetap sejajar)</span>
    </div>

    <!-- 3. Inline-Block Elements -->
    <h3>3. Display: Inline-Block</h3>
    <p>Sejajar seperti inline, tapi bisa diatur width/height-nya.</p>
    <div class="demo-inline-block">
        <span class="box">IB 1</span>
        <span class="box">IB 2</span>
        <span class="box">IB 3</span>
    </div>

    <!-- 4. Flexbox -->
    <h3>4. Flexbox (Satu Dimensi)</h3>
    <p>Mudah mengatur posisi (tengah/kiri/kanan) dan distribusi ruang dalam satu baris.</p>
    <div class="container-flex">
        <div class="box bg-blue">Flex 1</div>
        <div class="box bg-green">Flex 2</div>
        <div class="box bg-red">Flex 3</div>
    </div>

    <!-- 5. CSS Grid -->
    <h3>5. CSS Grid (Dua Dimensi)</h3>
    <p>Membuat layout kompleks dengan baris dan kolom sekaligus.</p>
    <div class="container-grid">
        <div class="item-grid">Header</div>
        <div class="item-grid item-big">Konten Utama (Besar)</div>
        <div class="item-grid">Sidebar</div>
        <div class="item-grid" style="grid-column: 1/-1;">Footer (Lebar Penuh)</div>
    </div>

CSS

body { font-family: sans-serif; padding: 20px; }
        .box { padding: 10px; margin: 5px; color: white; text-align: center; border-radius: 4px; }

        /* Warna Pembeda */
        .bg-blue { background-color: #3498db; }
        .bg-green { background-color: #2ecc71; }
        .bg-red { background-color: #e74c3c; }
        .bg-orange { background-color: #f39c12; }

        h3 { border-bottom: 2px solid #333; padding-bottom: 5px; margin-top: 30px; }

        /* 1. DEMO BLOCK */
        .demo-block div {
            display: block; /* Default untuk div */
            width: 200px;   /* Bisa diatur */
            height: 50px;   /* Bisa diatur */
        }

        /* 2. DEMO INLINE */
        .demo-inline span {
            display: inline; /* Default untuk span */
            width: 200px;    /* TIDAK BEREFEK */
            height: 50px;    /* TIDAK BEREFEK */
            background-color: #9b59b6;
        }

        /* 3. DEMO INLINE-BLOCK */
        .demo-inline-block span {
            display: inline-block;
            width: 100px;    /* BEREFEK */
            height: 50px;    /* BEREFEK */
            background-color: #34495e;
        }

        /* 4. DEMO FLEXBOX (Satu Dimensi) */
        .container-flex {
            display: flex;
            gap: 10px;
            background: #eee;
            padding: 10px;
            justify-content: space-around; /* Membagi ruang secara merata */
            align-items: center;           /* Vertikal tengah */
        }

        /* 5. DEMO GRID (Dua Dimensi) */
        .container-grid {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr; /* 3 Kolom: Kecil, Besar, Kecil */
            grid-template-rows: 100px 100px;    /* 2 Baris */
            gap: 10px;
            background: #eee;
            padding: 10px;
        }
        .item-grid { background: #e67e22; display: flex; align-items: center; justify-content: center; color:...