📌 CSS GRID TEMELLERİ VE İLERİ KULLANIM

1️⃣ Grid Konteyner Tanımlama

.container {
  display: grid; /* Grid konteyner oluşturur */
  grid-template-columns: 25% 50% 25%; /* 3 sütun */
  grid-template-rows: 100px 1fr; /* 2 satır */
}

• display: grid → grid oluşturur.
• grid-template-columns → sütun genişliklerini belirler.
• grid-template-rows → satır yüksekliğini belirler.

2️⃣ fr (Fraction) Birimi

• fr, mevcut alanın bir parçasını temsil eder.

.container {
  display: grid;
  grid-template-columns: 100px repeat(3, 1fr); /* 1 sabit 100px + 3 eşit fr sütun */
}

• 1fr 1fr 1fr → 3 eşit sütun.

3️⃣ repeat(), minmax(), auto-fit, auto-fill

grid-template-columns: repeat(4, 1fr); /* 4 eşit sütun */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

• repeat(sayı, boyut) → hızlı sütun/satır çoğaltma.
• minmax(min, max) → min-max boyut sınırı.
• auto-fill → boş hücreleri bile yerleştirir.
• auto-fit → boş hücreleri daraltır ve gizler.