CSS Grid: günlük arayüzlerde işe yarayan 6 desen

CSS Grid öğrendikten sonra 'bunu nasıl yaparım' sorusunun cevabı neredeyse her zaman grid olur.

Otomatik dolan kart grid'i

repeat(auto-fill, minmax(280px, 1fr)) ile kartlar hem responsive hem de minimum genişlik koruyan bir grid oluşturur.

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

Sticky sidebar + scroll content

grid-template-columns: 1fr 300px ve align-items: start ile sidebar sabit, içerik kayar.

Flexbox bir eksen, grid iki eksen. İkisini birlikte kullanmak en güçlü sonuç.