Grid System dan Container

Grid adalah fondasi layout — kerangka tak terlihat yang menjaga elemen-elemen tetap teratur dan sejajar.

Container

Container membatasi lebar maksimal konten agar tidak terlalu melebar di layar besar:

.container {
  max-width: 1200px;    /* Batas lebar */
  margin: 0 auto;       /* Tengahkan */
  padding: 0 1.5rem;    /* Padding samping untuk mobile */
}

Lebar container yang umum:

• Blog/artikel: 680px - 720px (fokus pada readability)
• Website umum: 1024px - 1280px
• Dashboard: 100% atau 1440px+

Column Grid

Grid kolom membagi container menjadi kolom-kolom yang rata:

12-column grid adalah standar industri — bisa dibagi 2, 3, 4, 6:

Kenapa 12? Angka paling fleksibel: habis dibagi 1, 2, 3, 4, 6 — menutup 99% layout yang kamu butuhkan tanpa pecahan aneh.

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem; /* 24px gutter */
}

/* Span 6 kolom = setengah lebar */
.half { grid-column: span 6; }

/* Span 4 kolom = sepertiga lebar */
.third { grid-column: span 4; }

Gutter (Gap)

Gutter adalah jarak antar kolom. Aturan umum:

• 16px — compact grid (dashboard, data-heavy)
• 24px — standard (kebanyakan website)
• 32px — spacious (marketing, editorial)

Responsive Grid

Grid harus menyesuaikan di layar kecil:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

Pattern auto-fit + minmax membuat kolom otomatis menyesuaikan — tidak perlu banyak media queries!

Tips Praktis

1. Konten tidak harus mengisi semua kolom — ruang kosong itu baik
2. Elemen penting bisa span lebih lebar dari kolom standar
3. Jaga konsistensi gutter — gunakan nilai yang sama di seluruh page