CSS Grid & Responsive Design

Membuat layout dua dimensi dengan CSS Grid dan menjadikan halaman responsif di semua ukuran layar dengan media queries.

Phase

Phase 2 — CSS

Topik

CSS Fundamentals

Durasi

90 Menit

Deadline Tugas

Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

🎯Tujuan Pembelajaran

01Menggunakan grid-template-columns dan grid-template-rows
02Menerapkan gap, grid-column, grid-row, dan grid-area
03Menggunakan fr unit, auto-fill, dan auto-fit
04Menulis Media Queries: @media (max-width: 768px)
05Menerapkan mobile-first approach
06Memahami breakpoint umum: 480px, 768px, 1024px

📖Sub-topik & Materi

01Grid container: grid-template-columns, grid-template-rows
02gap (row-gap, column-gap), grid-column, grid-row, grid-area
03fr unit: fractional unit (1fr = 1 bagian dari ruang tersisa)
04repeat(auto-fill, minmax(250px, 1fr)) — grid responsif otomatis
05Media Queries: @media (max-width: breakpoint)
06Mobile-first: mulai dari layar kecil, tambahkan untuk layar besar

💡Penjelasan Konsep

Konsep 1

CSS Grid: 2D Layout

CSS Grid adalah sistem layout 2 dimensi (baris DAN kolom sekaligus). Ideal untuk layout halaman kompleks. grid-template-columns mendefinisikan jumlah dan ukuran kolom. fr (fractional unit) membagi ruang yang tersedia secara proporsional. repeat() mempersingkat penulisan kolom yang berulang.

css

/* Grid 3 kolom sama rata */
.galeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Grid dengan kolom berbeda ukuran */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + konten utama */
  grid-template-rows: auto 1fr auto; /* header + main + footer */
  gap: 0;
  min-height: 100vh;
}

Konsep 2

Grid Responsif Otomatis dengan minmax()

repeat(auto-fill, minmax(min, max)) adalah satu-satunya kode CSS Grid yang membuat grid OTOMATIS responsif tanpa media query. auto-fill = buat sebanyak mungkin kolom yang muat. minmax(280px, 1fr) = kolom minimal 280px, maksimal 1fr. Saat layar mengecil, kolom otomatis pindah ke baris bawah.

css

/* Grid responsif TANPA media query */
.kartu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
/* Desktop: 3 kolom, Tablet: 2 kolom, Mobile: 1 kolom — otomatis! */

Konsep 3

Media Query dan Responsive Design

Media query mengubah CSS berdasarkan kondisi tertentu (biasanya lebar layar). Mobile-first approach: tulis CSS untuk mobile dulu (default), lalu tambahkan media query min-width untuk layar yang lebih besar. Ini lebih efisien karena mobile biasanya lebih sederhana. Breakpoint umum: 768px (tablet), 1024px (desktop).

css

/* Mobile-first: default untuk mobile */
.container {
  display: grid;
  grid-template-columns: 1fr; /* 1 kolom */
  padding: 16px;
}

/* Tablet ke atas */
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr); /* 2 kolom */
    padding: 24px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3, 1fr); /* 3 kolom */
    padding: 48px;
  }
}

💻Contoh Kode Lengkap

css

/* Layout 3 Kolom dengan Grid */
.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Auto-responsive Grid */
.grid-produk {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

/* Grid Area untuk Layout Halaman */
.halaman {
  display: grid;
  grid-template-areas: "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Media Queries */
@media (max-width: 1024px) {
  .layout { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .layout { grid-template-columns: 1fr; }
  .halaman { grid-template-columns: 1fr; }
}

⚡Latihan Kelas · Buat layout majalah 3 kolom dengan Grid, lalu buat responsif dengan media query

Buat div.grid-artikel dengan 6 artikel di dalamnya

Terapkan display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;

Buat artikel pertama span 2 kolom dengan grid-column: span 2

Tambahkan @media (max-width: 1024px) untuk 2 kolom

Tambahkan @media (max-width: 768px) untuk 1 kolom

Test responsivitas dengan DevTools Device Toolbar (Ctrl+Shift+M)

📝 Tugas 3.6 — Grid & Responsive

⏰ Deadline: Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

Buat landing page responsif dengan 3 breakpoint: desktop (3 kolom Grid), tablet (2 kolom), mobile (1 kolom). Halaman harus: tidak ada horizontal scroll di semua ukuran, menggunakan CSS Grid, dan menggunakan minmax() untuk grid yang adaptif.

Kriteria Penilaian	Poin
Grid terbentuk benar di desktop (3 kolom)	25
Media query tablet (max 1024px) berfungsi — 2 kolom	25
Media query mobile (max 768px) berfungsi — 1 kolom	25
Tidak ada horizontal scroll di semua breakpoint	25
Total	100