DIPERBARUI: 2026-11-06

[B1-M3]Menengah⏱ 35 Mnt Baca + 50 Mnt Praktik

Sistem Layout CSS Modern: Swiss Grid, Flexbox & Tipografi Cair

Membangun Tata Letak Editorial Responsif 12 Kolom dengan Variabel CSS & clamp()

BAGIKAN MODUL:Dukung rekan developer & tim Anda

💬WHATSAPP inLINKEDIN 𝕏POST

[KONTRAK HASIL BELAJAR // B1-M3]Standar Kompetensi Industri

⏱ 35 Mnt Baca•⚡ 50 Mnt Praktik•Lulus: ≥ 80/100 Poin

01. Target Pembelajar & Prasyarat

Frontend developer dan desainer web yang ingin menguasai CSS modern.

Prasyarat:Modul B1-M2: HTML5 Semantik & Aksesibilitas

02. Kompetensi Konseptual (Level 1–2)

✓Membedakan peran CSS Grid 2D (baris & kolom) dengan Flexbox 1D.

03. Kompetensi Praktis & Artefak Nyata (Level 3–4)

✓Membangun layout Swiss Grid 12 kolom dengan garis kisi terekspos menggunakan variabel CSS.

Artefak yang Dibangun: Halaman grid editorial `swiss-grid-layout.html`.

04. Aplikasi Nyata & Verifikasi

Penerapan Industri: Sistem desain dan tata letak visual seluruh website Z-Automation.

Metode Verifikasi: Mengubah ukuran viewport dari 375px hingga 1440px dan memeriksa kelancaran transisi tipografi clamp().

[BAGIAN 01 // MASALAH & URGENSI ARSITEKTURAL]

Mengapa Subjek Ini Krusial dalam Rekayasa Nyata?

Pelajari prinsip desain Swiss Style: sistem grid presisi, garis hairline 1px, tipografi fluida (clamp), dan tata letak responsif murni tanpa framework berat.

Dalam lingkungan produksi, kegagalan memahami batas-batas arsitektur sistem sering kali menyebabkan bug yang sulit dilacak, pemborosan biaya komputasi, atau antarmuka yang lambat bagi pengguna.

[BAGIAN 02 // MEKANISME DI BALIK LAYAR]

Bagaimana Sistem Sebenarnya Bekerja di Tingkat Protokol

Filosofi Desain Swiss Grid

Gaya Tipografi Internasional (Swiss Style) mengedepankan keteraturan matematika, hierarki visual yang tegas, dan struktur grid yang jujur. Alih-alih menyembunyikan grid, kita mengekspos garis pembatas 1px untuk memberi pembaca peta ruang visual yang stabil.

[DIAGRAM TEKNIS SVG INTERAKTIF // DIAG-02]

Alur Arsitektur Sistem Otonom & Runtime

LANGKAH 1 DARI 4

ENTITAS AKTIF:User -> Sistem

Pesan bahasa alami diterima melalui antarmuka web atau webhook chat.

[LIVE PAYLOAD INSPECTOR]JSON 2026

{
  "input": "Berapa estimasi biaya pembuatan landing page bisnis?"
}

[BAGIAN 03 // MATRIKS KESALAHPAHAMAN]

Koreksi Asumsi Umum vs Realitas Rekayasa

×ASUMSI KELIRU

“Membuat tata letak responsif harus menginstal framework seperti Bootstrap atau Tailwind.”

✓REALITAS SISTEM

CSS native modern (CSS Grid + clamp()) mampu menghasilkan layout yang jauh lebih ringan dan presisi tanpa dependensi eksternal.

[BAGIAN 04 // LABORATORIUM PRAKTIS & KODE]

Implementasi Langkah-demi-Langkah

Hasil akhir yang diharapkan: Grid responsif 12 kolom dengan garis pemisah presisi dan tipografi fluida.

STRUKTUR PROYEK DIREKOMENDASIKAN:

lab-b1-m3/
└── grid.html

1Implementasi Grid Swiss 12 Kolom

Penggunaan grid-template-columns dengan variabel CSS.

grid.html•html

✓Tested Successfully

LINGKUNGAN TERUJI: CSS Grid Valid38 BARIS KODE

1	<!DOCTYPE html>
2	<html lang="id">
3	<head>
4	<meta charset="UTF-8">
5	<style>
6	:root {
7	--font-display: clamp(2rem, 5vw, 4rem);
8	--grid-border: rgba(10, 11, 14, 0.15);
9	}
10	body { font-family: sans-serif; margin: 0; background: #F0F1FA; color: #0A0B0E; }
11	.swiss-container {
12	display: grid;
13	grid-template-columns: repeat(12, 1fr);
14	max-width: 1200px;
15	margin: 0 auto;
16	border: 1px solid var(--grid-border);
17	}
18	.col-4 { grid-column: span 4; border-right: 1px solid var(--grid-border); padding: 24px; }
19	.col-8 { grid-column: span 8; padding: 24px; }
20	h1 { font-size: var(--font-display); margin: 0; line-height: 1.05; }
21	@media (max-width: 768px) {
22	.col-4, .col-8 { grid-column: span 12; border-right: none; border-bottom: 1px solid var(--grid-border); }
23	}
24	</style>
25	</head>
26	<body>
27	<div class="swiss-container">
28	<aside class="col-4">
29	<p style="font-family: monospace;">[01 // INDEKS]</p>
30	<h2>Daftar Bab</h2>
31	</aside>
32	<main class="col-8">
33	<h1>Swiss Kinetic Editorial</h1>
34	<p>Presisi tipografi dan grid matematika.</p>
35	</main>
36	</div>
37	</body>
38	</html>

KEPUTUSAN ARSITEKTURAL UTAMA:

• Menggunakan clamp() untuk tipografi: Ukuran font menyesuaikan lebar layar secara kontinu tanpa patahan breakpoint.

PERINTAH EKSEKUSI TERMINAL:

$ Buka file grid.html di browser dan periksa responsivitas.

OUTPUT YANG DIHARAPKAN:

Layout 2 kolom di desktop yang otomatis runtuh menjadi 1 kolom di mobile.

[BAGIAN 05 // PANDUAN TROUBLESHOOTING & TANTANGAN]

Mengantisipasi Masalah Umum & Tantangan Ekstensi

Pesan Error: Grid meluber dari layar

Penyebab: Lupa box-sizing: border-box

Solusi Eksak: Tambahkan *, *::before, *::after { box-sizing: border-box; }.

⚡ TANTANGAN EKSTENSI MANDIRI:

Tambahkan tanda crosshair (+) di sudut-sudut persimpangan kolom menggunakan pseudo-element ::after.

[RUBRIK EVALUASI KOMPETENSI 100 POIN // B1-M3]

Uji Kompetensi Mandiri & Verifikasi Hasil

Standar kelulusan Z-Automation mewajibkan skor minimum 80 / 100 Poin dengan komponen Implementasi Praktis minimal 21 / 35 Poin (60%). Jawab soal diagnostik dan centang hasil pengujian praktis Anda.

BAGIAN A // PERTANYAAN DIAGNOSTIK KONSEPTUAL & TEKNIS (40 POIN)

01.Apa fungsi dari rumus CSS 'clamp(1.5rem, 3vw, 2.5rem)'?

Menentukan ukuran font fluida: minimal 1.5rem, ideal 3vw, dan maksimal 2.5rem.

Memotong teks yang melebihi batas container.

BAGIAN B // DAFTAR PERIKSA HASIL IMPLEMENTASI PRAKTIS (35 POIN — MIN. 21 POIN)

Centang item di bawah ini hanya jika Anda telah menjalankan kode di komputer Anda dan mengamati output yang benar:

Grid beralih ke 1 kolom pada lebar di bawah 768px+25 Poin

← MODUL SEBELUMNYA[B1-M2] Arsitektur HTML5 Semantik, Pohon Aksesibilitas & SEO Teknis MODUL SELANJUTNYA →[B1-M4] JavaScript Runtime, Event Loop, Manipulasi DOM & Fetch Asinkron