01 / 16

Bab 03

CSS Modern
Dari Layout
sampai Sistem Desain

Box model, Flexbox, Grid, responsive design, dan saat kapan Tailwind masuk akal — dibangun dari nol.

box model flexbox grid responsive

02 / 16

Tujuan Pembelajaran

Setelah bab ini, Anda dapat:

1.Menjelaskan box model dan bagaimana margin, border, padding berinteraksi

2.Membangun layout fleksibel menggunakan Flexbox dan Grid — tahu kapan masing-masing tepat

3.Menerapkan responsive design dengan media queries dan pendekatan mobile-first

4.Mengevaluasi trade-off antara CSS murni dan utility-first framework Tailwind CSS

5.Menghasilkan Personal Landing Page versi final — responsif dan visual menarik

03 / 16

Peta Posisi

CSS = CSSOM dalam Rendering Pipeline

HTML

Bab 2

→

DOM Tree

+

CSS

Bab 3

→

CSSOM Tree

→

Render Tree

Layout →

Paint →

Composite ✓

💡 Performa tip: transform & opacity hanya memicu re-composite — jauh lebih murah dari width atau height yang memicu re-layout penuh.

04 / 16

Box Model

Anatomi 4 Lapisan

MARGIN

BORDER

PADDING

CONTENT

Margin

Ruang transparan di luar border. Menciptakan jarak antar-elemen. Collapse secara vertikal.

Border

Garis terlihat. Shorthand: border: 2px solid var(--coral);

Padding

Ruang di dalam border. Background color terlihat di sini.

Content

Area teks/gambar. Ukurannya = width dan height.

05 / 16

box-sizing & Margin Collapse

content-box vs border-box

❌ content-box (default)

width: 200px + padding: 20px + border: 5px = 250px total

content 200 + extras = 250px 😵

✓ border-box (modern)

width: 200px = total 200px. Content = 200 − padding − border.

total = 200px ✓

Best practice: *, *::before, *::after { box-sizing: border-box; }

Margin Collapse

Vertical margin antara dua elemen bergabung menjadi nilai terbesar:

.top { margin-bottom: 30px }

↕ 30px (bukan 50px!)

.bottom { margin-top: 20px }

Margin collapse TIDAK terjadi pada:

Flexbox children Grid children Horizontal float / absolute

06 / 16

Cascade & Specificity

Siapa yang Menang?

Ketika beberapa aturan CSS berbenturan, specificity menentukan pemenang. Format: (a, b, c, d)

p

0

1

element selector

.btn

0

1

0

class selector

nav.btn

0

1

class + element

#header

0

1

0

ID selector — menang ↑

style=""

1

0

inline style — selalu menang

Jika specificity sama, aturan yang terakhir ditulis menang (cascade order).

⚠️ Anti-pattern: Jangan gunakan !important untuk menang secara paksa — ini memutus mekanisme cascade dan membuat CSS sulit di-maintain.

Format (a, b, c, d)

a

inline

b

ID

c

class

d

element

07 / 16

Inheritance

Properti yang Diwariskan vs Tidak

✓ Diwariskan

Child elements mewarisi otomatis dari parent:

color font-family font-size line-height list-style

                        body {

                        color: #f5f5f0; /* diwarisi semua */
                        font-family: Inter, sans-serif;
                        }
                    

✗ Tidak Diwariskan

Harus didefinisikan ulang di setiap elemen:

margin / padding border width / height background-color display

Bayangkan jika border diwariskan — setiap child element akan punya garis pinggir!

08 / 16

Flexbox — Satu Dimensi

Flexbox Container Properties

                        .container {

                        display: flex;
                        flex-direction: row; /* atau column */
                        justify-content: space-between;
                        /* distribusi di main axis */
                        align-items: center;
                        /* alignment di cross axis */
                        gap: 16px;
                        }
                    

flex-direction: row

Item 1

Item 2

Item 3

justify-content: space-between

Item 1

Item 2

Item 3

justify-content

flex-start — kumpul di awal

center — tengah main axis

space-between — item pertama & terakhir di ujung

space-evenly — ruang rata semua sisi

💡 align-items bekerja di cross axis (sumbu tegak lurus). Ketika flex-direction: column, sumbu bertukar!

09 / 16

Flexbox — Child Properties

flex-grow, shrink, basis

                        .item {

                        flex-grow: 0;   /* default */
                        flex-shrink: 1; /* default */
                        flex-basis: auto;
                        /* Shorthand: */
                        flex: 1; /* grow:1 shrink:1 basis:0 */
                        }
                    

flex: 1 pada semua item → semua sama besar, mengisi ruang tersedia.

flex-grow: 0 | 1 | 0 (grows)

Fixed

Grows →→→

Fixed

flex: 1 pada semua → rata

flex:1

grow: 1 | 2 | 1 → 2× lebih besar

1x

2x →→

1x

10 / 16

CSS Grid — Dua Dimensi

Grid — Baris DAN Kolom

                        .container {

                        display: grid;
                        /* 3 kolom: fixed + 2 fleksibel */
                        grid-template-columns: 200px 1fr 1fr;
                        /* repeat() shorthand: */
                        grid-template-columns:
                        repeat(3, 1fr);
                        /* Responsive otomatis: */
                        grid-template-columns:
                        repeat(auto-fit, minmax(200px, 1fr));
                        gap: 20px;
                        }
                        

                        .item-wide {

                        grid-column: 1 / 3; /* span 2 kolom */
                        }
                    

Unit fr (fraction) = bagian dari ruang tersedia. 2fr 1fr → kolom pertama 2× lipat kolom kedua.

repeat(3, 1fr)

1

2

3

4

5

6

grid-column: 1/3 (span 2)

span 2 kolom

3

4

5

6

300px sidebar + 1fr main

sidebar

main content

11 / 16

Keputusan Layout

Flexbox vs Grid

Kriteria	Flexbox	Grid
Dimensi	Satu (baris atau kolom)	Dua (baris dan kolom)
Kontrol	Item menentukan ukurannya	Container menentukan slot
Use case	Navbar, toolbar, card row, form	Page layout, dashboard, gallery
Responsif	`flex-wrap` otomatis	`auto-fit + minmax()`
Alignment	Sangat baik di satu sumbu	Sangat baik di kedua sumbu

💡 Bukan saling eksklusif! Gunakan Grid untuk layout halaman, Flexbox untuk mendistribusikan item di dalam cell Grid.

12 / 16

Responsive Design

Mobile-First — Filosofi

Tulis CSS untuk layar kecil terlebih dahulu, lalu min-width untuk layar besar. Lebih mudah menambahkan kompleksitas daripada menghapusnya.

📱 Mobile
<640px

📟 Tablet
≥640px

💻 Desktop
≥1024px

Breakpoint terbaik ditentukan oleh konten, bukan oleh jenis perangkat. Gunakan DevTools resize untuk menemukan titik "rusak."

                    /* ① Mobile first — default */

                    .container {

                    padding: 10px;
                    display: grid;
                    grid-template-columns: 1fr;
                    }


                    /* ② Tablet: ≥640px */

                    @media (min-width: 640px) {

                    .container {
                    padding: 20px;
                    grid-template-columns: 1fr 1fr;
                    }
                    }


                    /* ③ Desktop: ≥1024px */

                    @media (min-width: 1024px) {

                    .container {
                    padding: 40px;
                    grid-template-columns: repeat(3, 1fr);
                    max-width: 1200px;
                    margin: 0 auto;
                    }
                    }
                

13 / 16

Grid Responsif Otomatis

`auto-fit` + `minmax()`

                .card-grid {

                display: grid;
                /* Satu baris kode — responsif sempurna */
                grid-template-columns:
                repeat(auto-fit, minmax(250px, 1fr));
                gap: 20px;
                }
            

auto-fit: Buat sebanyak mungkin kolom yang muat, lalu rentangkan supaya mengisi baris.

minmax(250px, 1fr) — setiap kolom minimal 250px, maksimal mengisi sisa ruang (1fr).

Hasilnya — kolom menyesuaikan lebar kontainer:

Card 1

Card 2

Card 3

Card 4

14 / 16

Tailwind CSS

Utility-First: Trade-offs

✓ Kelebihan

→Development sangat cepat — tidak bolak-balik HTML ↔ CSS
→Design system konsisten out-of-the-box
→Bundle size kecil — class tidak dipakai otomatis dihapus

✗ Kekurangan

→HTML menjadi verbose (class panjang)
→Kurva belajar untuk hafal class names
→Tanpa fondasi CSS murni → "kumpulan class ajaib"

Tailwind ↔ CSS Murni

                        /* CSS murni */

                        .container {

                        margin-left: auto;
                        margin-right: auto;
                        padding: 1rem; /* px-4 */
                        background: #f3f4f6; /* bg-gray-100 */
                        }


                        /* Tailwind (HTML) */

                        <div class="mx-auto px-4 bg-gray-100">
                    

⚠️ Aturan: Sebelum pakai Tailwind, pastikan bisa menjelaskan setiap class dalam CSS murni. Jika tidak bisa — kembali ke fondasi.

md:grid-cols-3 ≈ @media(≥768px) grid-cols-3

15 / 16

🔧 Engineering Checkpoint

Lima Dimensi Evaluasi CSS

🔒 Keamanan

Adakah URL internal atau token tersembunyi di background-image atau @font-face? CSS Anda bisa dibaca siapa saja.

📖 Keterbacaan

.btn-primary vs .blue-box. Mobile → tablet → desktop. Developer lain paham tanpa komentar?

⚡ Performa

Hindari box-shadow berlebihan di banyak elemen. Gunakan transform untuk animasi — tidak memicu re-layout.

📈 Skalabilitas

Jika tambah 10 komponen baru, apakah pola Flexbox/Grid tetap konsisten? Hindari px hardcoded yang rusak di ukuran berbeda.

🔧 Pemeliharaan

Gunakan CSS custom properties untuk warna dan spacing. Pola berulang = kandidat variabel atau class yang konsisten.

💡 Contrast ratio teks minimal 4.5:1. Cek dengan DevTools → Elements → Accessibility. Interactive elements harus punya hover dan focus state.

16 / 16

Ringkasan Bab 3

Key Takeaways

📦 Box model = fondasi ukuran. Gunakan box-sizing: border-box global. Width yang Anda tulis = total ukuran.

🎯 Cascade & Specificity. Pahami mengapa style tidak diterapkan — bukan karena salah, bisa karena kalah specificity.

📐 Flexbox = 1D, Grid = 2D. Kombinasikan! Grid untuk layout halaman, Flexbox untuk mendistribusikan item dalam cell.

📱 Mobile-first. Default = mobile. Tambahkan kompleksitas dengan min-width media queries — bukan sebaliknya.

⚠️ Tailwind = abstraksi, bukan jalan pintas. Harus bisa menjelaskan setiap class dalam CSS murni sebelum memakainya.

Selanjutnya: Bab 4 — JavaScript: DOM, Events, dan Interaktivitas

CSS ModernDari Layoutsampai Sistem Desain