← CSS32 / 62

Dari satu kolom ke banyak kolom

Pola responsif paling umum: default satu kolom (mobile), lalu di layar lebar menjadi beberapa kolom. Perhatikan bahwa aturan dasar tidak perlu media query sama sekali — hanya penyesuaian yang perlu. Perhatikan urutannya: aturan di dalam media query harus ditulis SETELAH aturan dasarnya, karena keduanya bernilai specificity sama dan yang belakangan yang menang.

👀 Contoh dulu

.produk {
  display: grid;
  grid-template-columns: 1fr;      /* HP: 1 kolom */
  gap: 12px;
}

@media (min-width: 900px) {
  .produk {
    grid-template-columns: 1fr 1fr 1fr;  /* desktop: 3 kolom */
  }
}

Hasilnya: Kartu produk bertumpuk satu kolom di HP, lalu menjadi tiga kolom berjejer di layar lebar.

💡 Aturan dasar tidak perlu media query — hanya perubahannya yang perlu. Itulah efisiensi mobile-first.

📝 Sekarang giliranmu

Di dalam @media (min-width: 700px), ubah .grid menjadi grid-template-columns: 1fr 1fr;.

Preview
← SebelumnyaBerikutnya →