Menguasai CSS Grid dengan Claude Code

Anggap CSS Grid sebagai denah halaman

CSS Grid adalah sistem layout dua dimensi. Flexbox biasanya lebih cocok untuk satu baris atau satu kolom di dalam komponen; Grid lebih cocok untuk struktur halaman seperti header, sidebar, konten, footer, daftar kartu, pricing, dan blok CTA.

Istilah dasarnya sederhana. Grid container adalah elemen dengan display: grid. Grid items adalah anak langsungnya. Track adalah baris atau kolom. grid-template-areas memberi nama area layout agar mudah dibaca. minmax() menentukan ukuran minimum dan maksimum. auto-fit membuat kolom sebanyak yang muat lalu meregangkan item yang ada.

Baca juga responsive design, Flexbox patterns, CSS variables, dan accessibility. Referensi resmi: MDN CSS Grid Layout, grid-template-areas, minmax(), dan repeat().

Brief yang jelas untuk Claude Code

Jangan hanya menulis “buat responsive”. Berikan area, lebar minimum, viewport untuk pengujian, dan constraint bisnis. Untuk situs konten, CTA, code block, iklan, dan teks artikel tidak boleh overflow pada lebar 360px.

Kebutuhan	Beri tahu Claude Code	Alasan
Area	header, sidebar, main, footer, cta	grid-template-areas konsisten
Minimum	kartu 280px, teks sekitar 65ch	teks tetap terbaca
Fluid	auto-fit dan minmax()	breakpoint lebih sedikit
Verifikasi	360, 768, 1024, 1440px	menemukan overflow nyata
Monetisasi	CTA dan link produk tetap terlihat	menjaga jalur konversi

HTML siap pakai

<div class="dashboard-shell">
  <header class="site-header">
    <a class="brand" href="/">ClaudeCodeLab</a>
    <nav class="top-nav" aria-label="Primary">
      <a href="/id/blog/claude-code-responsive-design">Responsive</a>
      <a href="/id/blog/claude-code-flexbox-patterns">Flexbox</a>
      <a href="/en/training/">Training</a>
    </nav>
  </header>

  <aside class="sidebar" aria-label="Sections">
    <a href="#cards">Cards</a>
    <a href="#pitfalls">Pitfall</a>
    <a href="#cta">CTA</a>
  </aside>

  <main class="content">
    <section class="hero-panel">
      <p class="eyebrow">CSS Grid guide</p>
      <h1>Layout stabil untuk artikel dan dashboard</h1>
      <p>Named areas, minmax, dan auto-fit menjaga struktur HTML yang sama di berbagai ukuran layar.</p>
    </section>

    <section id="cards" class="card-grid" aria-label="Use cases">
      <article class="card">
        <h2>Arsip artikel</h2>
        <p>Kartu tetap terbaca dan jumlah kolom menyesuaikan otomatis.</p>
        <a href="/id/blog/claude-code-css-grid-mastery">Checklist</a>
      </article>
      <article class="card">
        <h2>Pricing</h2>
        <p>CTA sejajar agar paket mudah dibandingkan.</p>
        <a href="/en/products/">Lihat template</a>
      </article>
      <article class="card">
        <h2>Dashboard</h2>
        <p>Area bernama membuat urutan mobile jelas.</p>
        <a href="/en/training/">Diskusikan rollout</a>
      </article>
    </section>
  </main>

  <footer class="site-footer" id="cta">
    <p>Untuk adaptasi ke repo Anda, lihat <a href="/en/training/">Claude Code training dan consultation</a>.</p>
  </footer>
</div>

CSS dengan grid-template-areas, minmax, dan auto-fit

.dashboard-shell {
  --page-gap: clamp(1rem, 2vw, 2rem);
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  gap: var(--page-gap);
  min-height: 100svh;
  padding: var(--page-gap);
}

.site-header { grid-area: header; }
.sidebar { grid-area: sidebar; align-self: start; position: sticky; top: 1rem; }
.content { grid-area: content; min-width: 0; }
.site-footer { grid-area: footer; border-top: 1px solid #d7dee8; padding-block-start: 1rem; }

@media (width < 768px) {
  .dashboard-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }

  .sidebar { position: static; }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.75rem;
  min-width: 0;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 1rem;
}

min-width: 0 mencegah URL panjang, tabel, atau code block mendorong area grid melewati viewport. Untuk kartu artikel dan pricing, auto-fit biasanya lebih enak daripada auto-fill karena track kosong dilipat.

Komponen Astro

---
const items = [
  { title: "Responsive design", body: "Cek beberapa viewport sebelum publish.", href: "/id/blog/claude-code-responsive-design" },
  { title: "Flexbox patterns", body: "Gunakan Flexbox untuk kontrol kecil satu arah.", href: "/id/blog/claude-code-flexbox-patterns" },
  { title: "CSS variables", body: "Jadikan spacing dan lebar kartu sebagai token.", href: "/id/blog/claude-code-css-variables" }
];
---

<section class="related-grid" aria-label="Related guides">
  {items.map((item) => (
    <article class="related-card">
      <h2>{item.title}</h2>
      <p>{item.body}</p>
      <a href={item.href}>Baca panduan</a>
    </article>
  ))}
</section>

<style>
  .related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
  }

  .related-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    padding: 1rem;
  }
</style>

Kartu React / TSX

type ResourceCard = {
  title: string;
  description: string;
  href: string;
  cta: string;
};

const resources: ResourceCard[] = [
  {
    title: "CSS Grid review",
    description: "Cek areas, minmax, overflow, dan kartu mobile.",
    href: "/id/blog/claude-code-css-grid-mastery",
    cta: "Checklist"
  },
  {
    title: "Claude Code training",
    description: "Ubah prompt, aturan review, dan verifikasi menjadi workflow tim.",
    href: "/en/training/",
    cta: "Konsultasi"
  },
  {
    title: "Template products",
    description: "Mulai dengan CLAUDE.md dan prompt review reusable.",
    href: "/en/products/",
    cta: "Produk"
  }
];

export function ResourceGrid() {
  return (
    <section className="resource-grid" aria-label="CSS Grid resources">
      {resources.map((resource) => (
        <article className="resource-card" key={resource.href}>
          <h2>{resource.title}</h2>
          <p>{resource.description}</p>
          <a href={resource.href}>{resource.cta}</a>
        </article>
      ))}
    </section>
  );
}

Use case dan pitfall

Use case pertama adalah arsip artikel dengan judul dan tag yang panjangnya berbeda. auto-fit + minmax() menghindari CSS breakpoint yang rapuh. Use case kedua adalah halaman pricing, karena CTA harus tetap terlihat. Use case ketiga adalah dashboard internal dengan sidebar, filter, dan tabel. Use case keempat adalah galeri media, tempat aspect-ratio membantu mengurangi layout shift.

Pitfall konkret: tiga kolom fixed di mobile, lupa min-width: 0, nama area tidak cocok, dan memakai Grid untuk semua alignment kecil. Gunakan Grid untuk struktur halaman dan koleksi kartu; gunakan Flexbox di tombol, navigasi, dan kontrol kecil.

Setelah implementasi, minta Claude Code mereview horizontal overflow, visibilitas CTA, scroll code block, keyboard navigation, dan link internal. Untuk konten yang dimonetisasi, pastikan link produk dan konsultasi tetap terlihat di mobile. Claude Code training dan template products membantu menjadikannya workflow review berulang.

Ringkasan

CSS Grid praktis bukan berarti memakai semua properti. Gunakan grid-template-areas agar struktur terbaca, minmax() untuk menjaga ukuran minimum, dan auto-fit untuk kartu responsif. Dengan constraint yang jelas, Claude Code bisa membuat sekaligus mereview layout yang tahan terhadap konten nyata.