Yükleniyor...

CSS Grid

Flexbox öğeleri tek yönde dizdi. CSS Grid bir sonraki bölümü açar: satırlar ve sütunlar birlikte. display: grid açın, izleri (track) çizin, gap ekleyin; derinliğe Grid Container, Items, Areas ve Responsive derslerinde inin.

Grid başlangıç araç seti

📊 Grid’e bakış

Fikir	Günlük iş
Grid kapsayıcı	`display: grid` (veya `inline-grid`) taşıyan ebeveyn
Grid öğeleri	Izgarada oturan doğrudan çocuklar
İzler (tracks)	Kafesi oluşturan satırlar ve sütunlar
Hücreler / alanlar	Öğelerin indiği yerler (alanlar sonraki derste)
`gap`	Margin hilesi olmadan izler arası oluklar
`fr` birimi	Kalan boşluğu izler arasında paylaştırmak (önizleme)

Grid’i sayfa için milimetrik kağıt gibi düşünün: önce sütun ve satır çizersiniz, sonra içeriği hücrelere bırakırsınız. Flexbox araç çubukları ve tek eksenli kümeler için hâlâ güçlüdür.

display: grid — kafesi açın

Ebeveyne display: grid koyun. Çocuklar otomatik olarak grid öğesi olur — temel model için ekstra sınıf gerekmez.

Temel grid kapsayıcı

css

.board {
display: grid;
}

Önce sütunlar — basit bir şablon

grid-template-columns dikey izleri tanımlar. Üç eşit sütun, kart veya döşeme için sakin bir başlangıç çizimidir.

Üç eşit sütun

css

.board {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

gap — dürüst oluklar

İzler yeniden aktığında boşluk tutarlı kalsın diye gap (veya row-gap / column-gap) kullanın. Her çocuğa margin serpmek yerine gap’i tercih edin.

gap’li Grid

css

.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}

Küçük bir kart matrisi

Galeri eskiziyle aynı fikir — eşit izler artı gap — ama artık yalnızca flex-wrap değil, Grid dili konuşuyorsunuz.

Kart matrisi

css

.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}

.cards__item {
min-height: 8rem;
}

fr — kalan boşluğu paylaşın

fr birimi serbest alanı izler arasında böler. Yer kaldığında 2fr 1fr ilk sütunu ikincinin iki katı genişlikte yapar.

Eşit olmayan fr sütunları

css

.shell {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}

Sakin bir Grid alışkanlığı

İki boyutlu sayfa kabukları ve matrisler için Grid kullanın. Tek boyutlu satırlar için Flexbox kullanın. display: grid, basit bir grid-template-columns ve gap ile başlayın. Derin otomatik yerleştirme, adlı alanlar ve duyarlı Grid izlerini sonraki derslere bırakın.

Adlı başlangıç kabuğu

css

.page {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}

.page__main,
.page__rail {
min-width: 0;
}

Kendiniz deneyin

display: grid ile bir kapsayıcı yapın.
grid-template-columns: repeat(3, 1fr) ayarlayın.
İzler arasına gap: 1rem ekleyin.
main + rail kabuğu için 2fr 1fr deneyin.
Bir cümle yazın: hâlâ ne zaman Flexbox seçersiniz?

Yaygın hatalar

Düzen ihtiyacı olmadan her öğeye display: grid koymak
Yalnızca Flexbox wrap’in gerçek 2D Grid’in yerini alacağını beklemek
gap’i atlayıp çocuk margin’leriyle sonsuza dek savaşmak
Temel izler doğal gelmeden adlı alanlara atlamak
Grid daha iyi otururken tüm sayfa kabuklarını float ile kurmak

Özet

CSS Grid iki boyutludur: satırlar ve sütunlar birlikte
display: grid çocukları grid öğesine çevirir
grid-template-columns (ve sonra satırlar) izleri tanımlar
gap ve fr olukları ve serbest alanı sakin tutar
Daha derin kapsayıcı, öğe, alan ve duyarlı Grid dersleri sonra gelir

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓

Sorular

🎯

70%

Geçmek İçin

♾️

∞

Süre

🔄

∞

Deneme

📝 Talimatlar

Her soruyu dikkatle okuyun
Her soru için en iyi cevabı seçin
Quiz'i istediğiniz kadar tekrar alabilirsiniz
İlerlemeniz üstte gösterilecek

Dil