Media query dan mobile-first

Aturan @media membungkus sekelompok aturan CSS yang hanya dipakai kalau kondisinya terpenuhi. Kondisi (min-width: 600px) berarti aturan di dalamnya berlaku pada lebar 600 piksel ke atas.

.galeri { grid-template-columns: 1fr; }

@media (min-width: 600px) {
  .galeri { grid-template-columns: repeat(2, 1fr); }
}

Pola mobile-first menulis aturan dasar untuk layar tersempit lebih dulu, lalu menambah aturan dengan min-width untuk layar yang lebih lebar. Aturan dasar tidak perlu dibungkus media query sama sekali.

Titik tempat tata letak diubah dipilih dari isi halaman: perbesar jendela sampai kolomnya terlihat terlalu lebar, lalu pasang media query di lebar itu.