cssgridareaslayoutMenengah5 mnt baca

Grid Template Areas

Mendefinisikan layout halaman dengan nama area yang bisa dibaca seperti denah.

Kenapa areas ada?

Menempatkan item dengan nomor garis (grid-column: 1 / 4) works, tapi layout halaman dibaca sebagai angka yang abstrak. grid-template-areas menyelesaikan masalah keterbacaan: kamu menggambar denah layout dengan teks, lalu menempelkan item ke nama area.

css

.halaman {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar konten"
    "footer footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.konten  { grid-area: konten; }
.footer  { grid-area: footer; }

Baca denahnya: header membentang dua kolom, lalu sidebar + konten, lalu footer membentang. Jauh lebih jelas daripada angka garis.

Aturan penulisan denah

Tiap baris string = satu baris grid, tiap kata = satu kolom. Jumlah kata per baris harus sama.
Nama area berbentuk persegi panjang: satu nama tidak boleh membentuk huruf L.
Titik . berarti petak kosong.

css

grid-template-areas:
  "header header header"
  "nav konten iklan"
  "nav footer footer";

Responsif dengan areas: kekuatan sesungguhnya

Inilah alasan areas dicintai: mengubah layout total hanya dengan menukar denah di media query, tanpa menyentuh HTML sama sekali.

css

.halaman {
  display: grid;
  grid-template-columns: 200px 1fr 150px;
  grid-template-areas:
    "header header header"
    "nav konten iklan"
    "footer footer footer";
}

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

Di mobile, sidebar dan iklan otomatis pindah ke bawah konten. Satu denah diganti, layout berubah total.

Catatan teknis: nama area tidak boleh pakai karakter spesial dan tiap area harus persegi panjang. Kalau butuh bentuk L, pecah menjadi dua area terpisah.

Tips profesional

Beri nama area yang bermakna (konten, bukan c1): denah adalah dokumentasi yang dibaca manusia.
Area kosong dengan . berguna untuk memberi "napas" pada layout.
Simpan denah desktop dan mobile berdampingan dengan komentar agar perubahan layout terlacak.

Pola siap salin: layout blog

css

.blog {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas:
    "header header"
    "artikel sidebar"
    "footer footer";
  gap: 24px;
}

@media (max-width: 800px) {
  .blog {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header" "artikel" "sidebar" "footer";
  }
}

Denah blog desktop menjadi tumpukan mobile hanya dengan menukar denah.

Debug denah dengan cepat

Saat denah tidak tampil sesuai harapan, periksa tiga hal: (1) jumlah kata per baris SAMA, (2) nama area persegi panjang (tidak berbentuk L), (3) setiap nama di denah punya elemen dengan grid-area yang cocok. 90% bug areas berasal dari tiga hal ini.

Rangkuman

grid-template-areas menggambar denah layout sebagai teks yang mudah dibaca. Tempelkan item dengan grid-area: nama. Kekuatan terbesarnya: layout responsif hanya dengan menukar denah di media query.

Live Playground

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

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

Tantangan

Denah Mobile

Areas membuat layout responsif semudah menggambar ulang denah. Skill ini dipakai di hampir semua layout halaman modern.

Di playground:

Tambahkan media query max-width 600px: satu kolom, urutan header, konten, sidebar, footer.
Tambahkan area "iklan" di HTML dan selipkan di denah desktop antara konten dan footer (satu baris sendiri membentang penuh).
Di komentar, jelaskan kenapa areas lebih mudah dibaca daripada nomor garis untuk layout halaman.

<!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