cssgridlayoutstudi-kasusMenengah5 mnt baca

Studi Kasus: Layout Halaman

Membangun kerangka halaman lengkap dengan grid areas + sidebar flexbox.

Target

Halaman dashboard admin: header, sidebar navigasi, area konten dengan kartu statistik, dan footer. Desktop: sidebar kiri. Mobile: semua menumpuk vertikal.

Kerangka dengan areas

css

.halaman {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar konten"
    "footer footer";
}

min-height: 100vh memastikan footer menempel di bawah walau konten sedikit. 1fr pada baris tengah membuat konten mengisi sisa tinggi.

Di dalam area sidebar (hasil grid), susun menu vertikal dengan flexbox:

css

.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #0f172a;
  padding: 16px;
}

.sidebar a {
  color: #cbd5e1;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
}

.sidebar a.aktif,
.sidebar a:hover {
  background: #1e293b;
  color: white;
}

Kartu statistik di konten

css

.konten {
  grid-area: konten;
  padding: 24px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.stat {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
}

Perhatikan: grid (halaman) berisi grid lagi (kartu stat). Grid bersarang sepenuhnya normal.

Versi mobile: tukar denah

css

@media (max-width: 768px) {
  .halaman {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "konten"
      "sidebar"
      "footer";
  }
}

Sidebar pindah ke bawah konten di mobile. Tanpa mengubah satu baris pun HTML.

Catatan teknis: urutan areas di mobile memengaruhi urutan baca screen reader secara visual, tapi urutan DOM tetap. Kalau sidebar berisi navigasi penting, pertimbangkan tetap di atas konten di mobile, atau pakai pola drawer.

Tips profesional

Pola "sticky footer": body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; } bahkan tanpa areas.
Sidebar sticky di dalam grid: .sidebar { position: sticky; top: 16px; align-self: start; }.
Untuk admin yang kompleks, pisahkan CSS layout (areas) dari CSS komponen (kartu, tabel) ke file berbeda agar mudah dirawat.

Pola siap salin: kerangka admin

css

.admin {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "sidebar header"
    "sidebar konten"
    "sidebar footer";
}

Sidebar penuh setinggi layar di kiri, header/konten/footer di kanan. Varian populer dari pola dashboard standar.

Variasi: layout 3 kolom

css

.halaman-3 {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  grid-template-areas:
    "header header header"
    "nav konten iklan"
    "footer footer footer";
  min-height: 100vh;
}

Tambah satu kolom iklan/widget kanan: denah tetap terbaca jelas. Di mobile, tumpuk semua menjadi satu kolom.

Rangkuman

Layout halaman = grid areas untuk kerangka + flexbox/grid di dalam tiap area + tukar denah di media query untuk mobile. Ini arsitektur layout yang dipakai dashboard modern.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Dashboard Mobile

Menggabungkan grid areas + media query adalah skill layout halaman paling berharga. Hampir semua dashboard memakai pola ini.

Di playground:

Tambahkan media query 768px: satu kolom dengan urutan header, konten, sidebar, footer.
Di mobile, ubah sidebar menjadi horizontal (flex-direction: row, overflow-x: auto) agar hemat ruang vertikal.
Di komentar, jelaskan peran min-height: 100vh + grid-template-rows: auto 1fr auto.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox

Kuis Bab

Uji pemahamanmu: CSS Grid

Jawab 5 soal berikut, lalu tekan "Periksa Jawaban".

1.grid-template-columns: repeat(3, 1fr) berarti?

2.Apa beda auto-fit dengan auto-fill pada repeat()?

3.grid-column: 1 / 4 pada grid 3 kolom berarti?

4.Kapan sebaiknya memakai grid daripada flexbox?

5.Apa keunggulan grid-template-areas untuk layout responsif?