Layout CSS

Mengatur tata letak (layout) adalah salah satu bagian terpenting di CSS. Di sini kamu akan belajar Box Model, Flexbox, dan CSS Grid — tiga konsep yang paling sering dipakai di dunia nyata.

Box Model

Setiap elemen HTML adalah sebuah "kotak" (box) yang terdiri dari 4 lapisan:

┌─────────────────────────────────┐
│           margin                │
│  ┌───────────────────────────┐  │
│  │         border            │  │
│  │  ┌─────────────────────┐  │  │
│  │  │      padding        │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │   content     │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

.box {
    width: 300px;           /* lebar konten */
    padding: 20px;          /* jarak konten ke border */
    border: 2px solid #333; /* garis tepi */
    margin: 15px;           /* jarak ke elemen lain */
}

Properti	Fungsi
`width` / `height`	Ukuran area konten
`padding`	Jarak dalam (konten ke border)
`border`	Garis tepi
`margin`	Jarak luar (ke elemen lain)

box-sizing: border-box

Secara default, width hanya menghitung area konten. Dengan box-sizing: border-box, width mencakup padding dan border — jauh lebih mudah diatur!

* {
    box-sizing: border-box;  /* Selalu gunakan ini! */
}

Shorthand Margin & Padding

/* Semua sisi sama */
margin: 20px;

/* Atas-bawah | Kiri-kanan */
margin: 20px 10px;

/* Atas | Kanan | Bawah | Kiri (searah jarum jam) */
margin: 10px 20px 30px 40px;

/* Satu sisi saja */
margin-top: 10px;
margin-bottom: 20px;

Flexbox

Flexbox adalah cara paling mudah dan populer untuk mengatur layout. Pikirkan Flexbox seperti baris atau kolom yang bisa diatur perataan dan jaraknya.

Cara Kerja Flexbox

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.container {
    display: flex;          /* Aktifkan flexbox */
}

Hanya dengan display: flex, child elements otomatis tersusun secara horizontal (berjajar ke kanan).

Arah (flex-direction)

.container {
    display: flex;
    flex-direction: row;            /* Horizontal (default) → */
    /* flex-direction: column;         Vertikal ↓ */
    /* flex-direction: row-reverse;    Horizontal terbalik ← */
}

Perataan Horizontal (justify-content)

.container {
    display: flex;
    justify-content: flex-start;    /* Rata kiri (default) */
    /* justify-content: center;        Rata tengah */
    /* justify-content: flex-end;      Rata kanan */
    /* justify-content: space-between; Jarak merata (tepi rapat) */
    /* justify-content: space-around;  Jarak merata (tepi ada jarak) */
    /* justify-content: space-evenly;  Jarak sama persis */
}

Perataan Vertikal (align-items)

.container {
    display: flex;
    height: 300px;
    align-items: stretch;           /* Isi penuh tinggi (default) */
    /* align-items: flex-start;        Rata atas */
    /* align-items: center;            Rata tengah */
    /* align-items: flex-end;          Rata bawah */
}

Jarak antar Item (gap)

.container {
    display: flex;
    gap: 20px;              /* Jarak antar item */
}

Wrapping (Bungkus ke Baris Baru)

.container {
    display: flex;
    flex-wrap: wrap;        /* Item pindah ke baris baru kalau penuh */
    gap: 15px;
}

.item {
    flex: 1 1 200px;        /* Minimal lebar 200px, bisa menyusut/membesar */
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: #333;
}

nav .logo {
    font-size: 24px;
    font-weight: bold;
    color: white;
}

nav .menu {
    display: flex;
    gap: 20px;
    list-style: none;
}

nav .menu a {
    color: white;
    text-decoration: none;
}

Contoh: Card Layout dengan Flexbox

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 250px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS Grid

Grid adalah sistem layout 2 dimensi — bisa mengatur baris DAN kolom sekaligus. Sangat cocok untuk layout halaman keseluruhan.

Dasar Grid

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;   /* 3 kolom sama besar */
    gap: 20px;
}

1fr artinya 1 fraction — bagian yang sama dari ruang yang tersedia.

Variasi Kolom

/* 3 kolom sama besar */
grid-template-columns: 1fr 1fr 1fr;

/* Shorthand: repeat */
grid-template-columns: repeat(3, 1fr);

/* Kolom dengan ukuran berbeda */
grid-template-columns: 250px 1fr 1fr;    /* Kolom 1 fixed 250px */

/* Auto-fit: otomatis atur jumlah kolom */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Contoh: Layout Blog dengan Grid

.page-layout {
    display: grid;
    grid-template-columns: 1fr 300px;    /* Konten utama + sidebar */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.main-content {
    /* Otomatis mengisi kolom pertama */
}

.sidebar {
    /* Otomatis mengisi kolom kedua */
}

Latihan: Layout Halaman Lengkap

Buat file layout.html dan layout-style.css:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout dengan Flexbox & Grid</title>
    <link rel="stylesheet" href="layout-style.css">
</head>
<body>
    <nav>
        <div class="logo">WebUser</div>
        <ul class="menu">
            <li><a href="#">Beranda</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Tentang</a></li>
            <li><a href="#">Kontak</a></li>
        </ul>
    </nav>

    <div class="page-layout">
        <main>
            <h1>Artikel Terbaru</h1>
            <div class="card-grid">
                <div class="card">
                    <h3>Belajar HTML</h3>
                    <p>Dasar-dasar membuat struktur halaman web.</p>
                </div>
                <div class="card">
                    <h3>Belajar CSS</h3>
                    <p>Membuat tampilan website jadi menarik.</p>
                </div>
                <div class="card">
                    <h3>Belajar JavaScript</h3>
                    <p>Menambahkan interaktivitas ke website.</p>
                </div>
                <div class="card">
                    <h3>Belajar PHP</h3>
                    <p>Bahasa pemrograman server-side.</p>
                </div>
            </div>
        </main>

        <aside>
            <h3>Kategori</h3>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">PHP</a></li>
            </ul>
        </aside>
    </div>

    <footer>
        <p>&copy; 2026 WebUser. Belajar Web Development.</p>
    </footer>
</body>
</html>

/* layout-style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f0f2f5;
}

/* Navbar dengan Flexbox */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.menu {
    display: flex;
    gap: 25px;
    list-style: none;
}

.menu a {
    color: white;
    text-decoration: none;
    font-weight: 500;
}

.menu a:hover {
    text-decoration: underline;
}

/* Page Layout dengan Grid */
.page-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 30px;
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
}

main h1 {
    margin-bottom: 20px;
    color: #333;
}

/* Card Grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.card {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.card h3 {
    color: #667eea;
    margin-bottom: 10px;
}

/* Aside */
aside {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    height: fit-content;
}

aside h3 {
    margin-bottom: 15px;
    color: #764ba2;
}

aside ul {
    list-style: none;
}

aside li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

aside a {
    color: #667eea;
    text-decoration: none;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background: #333;
    color: #aaa;
    margin-top: 30px;
}

Selanjutnya

Layout sudah rapi! Tapi bagaimana di HP? Mari belajar Responsive Design → agar website tampil bagus di semua ukuran layar.

#Layout CSS

#Box Model

#Shorthand Margin & Padding

#Flexbox

#Cara Kerja Flexbox

#Arah (flex-direction)

#Perataan Horizontal (justify-content)

#Perataan Vertikal (align-items)

#Jarak antar Item (gap)

#Wrapping (Bungkus ke Baris Baru)

#Contoh: Navbar dengan Flexbox

#Contoh: Card Layout dengan Flexbox

#CSS Grid

#Dasar Grid

#Variasi Kolom

#Contoh: Layout Blog dengan Grid

#Latihan: Layout Halaman Lengkap

#Selanjutnya