CSS Grid nedir?

CSS Grid Layout (veya sadece CSS Grid) CSS'de iki boyutlu bir düzenleme sistemidir. Öğeleri hem satırlar (yatay) hem de sütunlar (dikey) boyunca konumlandırmaya olanak tanır ve karmaşık ızgara yapıları oluşturarak arayüzler inşa eder.

CSS Grid'in temel kavramları şunlardır:

Grid Container: display: grid veya display: inline-grid özelliği uygulanan öğe. Bu öğenin alt öğeleri Grid Öğeleri haline gelir.
Grid Items: Grid Container'ın doğrudan alt öğeleri.
Grid Lines: Izgarayı oluşturan bölücü çizgiler. İsimlendirilebilir veya sayısal indekslere sahip olabilirler.
Grid Tracks: Bir çizgi ile diğer çizgi arasındaki alan — bu ya bir sütun ya da bir satırdır.
Grid Cells: Bir satır ve sütunun kesişimiyle oluşan en küçük ızgara birimi.
Grid Areas: Bir veya birkaç hücreyi kapsayan dikdörtgen alan.

CSS Grid ile çalışmak için temel özellikler şunlardır:

Konteyner için:

display: grid | inline-grid;
grid-template-columns: Izgara sütunlarını belirler.
grid-template-rows: Izgara satırlarını belirler.
grid-template-areas: İsimlendirilmiş ızgara alanlarını belirler.
gap | row-gap | column-gap: Hücreler arasındaki boşlukları ayarlar.
justify-items | align-items | place-items: Hücre içeriğinin ana ve çapraz eksenlerde hizalanması.
justify-content | align-content | place-content: Izgara çizgilerinin konteyner içindeki hizalanması.

Öğeler (Grid Items) için:

grid-column-start | grid-column-end | grid-column: Öğenin hangi sütun çizgilerini kapsadığını belirler.
grid-row-start | grid-row-end | grid-row: Öğenin hangi satır çizgilerini kapsadığını belirler.
grid-area: Öğeye isimlendirilmiş bir alan atar veya çizgiler kullanarak konumunu belirler.
justify-self | align-self | place-self: Öğenin kendi hücresindeki hizalaması.

CSS Grid, duyarlı ve karmaşık düzenler oluşturmak için güçlü araçlar sağlar ve daha önce float, inline-block veya mutlak konumlandırma kullanımıyla yapılan işleri büyük ölçüde basitleştirir.

.container {
  display: grid; /* Öğeyi Grid konteyneri yapar */
  grid-template-columns: 1fr 1fr 1fr; /* 3 eşit genişlikte sütun oluşturur */
  grid-template-rows: auto auto; /* Otomatik yüksekliğe sahip 2 satır oluşturur */
  gap: 10px; /* Hücreler arasında boşluk ekler */
}

.item {
  /* Konteyner içindeki öğeler otomatik olarak Grid Öğeleri olur */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* İlk öğe 1'den 3'e kadar olan sütunları kaplar */
}