CSS Grid Öğeleri
Grid Container ebeveyni yönetti — track’ler, gap ve hücre varsayılanları. Grid öğeleri başka bir soru sorar: her çocuk nasıl çizgi alır, track kaplar ve hücresindeki hizayı değiştirir? Adlandırılmış alanlardan önce çizgi yerleşimine hakim olun.
Grid öğeleri araç kutusu
📊 Grid öğeleri bir bakışta
| Özellik | Günlük iş |
|---|---|
grid-column |
Öğenin sütun başlangıç/bitiş çizgilerini koyar (kısayol) |
grid-row |
Öğenin satır başlangıç/bitiş çizgilerini koyar (kısayol) |
span |
Öğeyi başlangıç çizgisinden N track boyunca uzatır |
justify-self |
Bir öğe için justify-items değerini ezer (inline eksen) |
align-self |
Bir öğe için align-items değerini ezer (block eksen) |
place-self |
align-self + justify-self kısayolu |
Grid çizgileri başlangıç kenarından numaralanır. 1. çizgiden başlayıp 3. çizgide biten bir öğe iki sütun track’ini kaplar. Önce çizgilerle düşünün; adlandırılmış alanlar sonra gelir.
grid-column — sütun çizgilerine oturun
grid-column: start / end çocuğu sütun çizgileri arasına sabitler. Kenar çubuğu çoğu zaman ilk track’te oturur; ana panel kalanı alır.
.board {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}
.board__aside {
grid-column: 1 / 2;
}
.board__main {
grid-column: 2 / 3;
}
span — track’ler boyunca uzatın
span başlangıç çizgisinden track sayar. Üç sütunlu tahtada tam genişlik hero çoğu zaman grid-column: 1 / span 3 kullanır.
.hero {
grid-column: 1 / span 3;
}
grid-row — satır çizgilerine oturun
Aynı fikir block ekseninde. Bir afişi üst banda sabitleyin veya span ile uzun bir karta iki satır track’i verin.
.banner {
grid-row: 1 / 2;
}
.tall-card {
grid-row: 2 / span 2;
}
Sütun ve satır birlikte
Bir çocuk net bir dikdörtgen istediğinde ikisini birleştirin — örneğin iki sütun ve bir satırı kaplayan öne çıkan karo.
.feature {
grid-column: 1 / span 2;
grid-row: 1 / 2;
}
place-self — bir öğe, farklı hücre hizası
Tek bir çocuk için konteynerin justify-items / align-items değerini ezin. Her iki eksen de uyumlu olmalıysa place-self: center sakin bir kısayoldur.
.board {
display: grid;
justify-items: stretch;
align-items: stretch;
gap: 0.75rem;
}
.board .badge {
place-self: center;
}
Sakin bir grid öğesi alışkanlığı
Önce sütun ve satır çizgileriyle yerleştirin, çocuk birden fazla track istiyorsa span kullanın, sonra tek seferlik hizayı place-self ile ince ayarlayın. DOM sırasını akıllı tutun — klavye odağını bozan order numaralarından kaçının. Adlandırılmış şablon alanlarını Grid Areas dersine bırakın.
.shell__hero {
grid-column: 1 / -1;
}
.shell__aside {
grid-column: 1 / 2;
align-self: start;
}
.shell__main {
grid-column: 2 / 3;
}
Kendiniz deneyin
- İki sütunlu tahta kurun; aside’ı
grid-column: 1 / 2, main’i2 / 3yapın. grid-column: 1 / span 3ile üç sütunlu hero ekleyin.grid-row: 1 / 2ile bir afiş sabitleyin.- Öne çıkan karoyu iki sütun ve bir satıra span edin.
- Bir badge’i
place-self: centerile ortalayın ve sonraki ders için adlandırılmış alanları not edin.
Yaygın hatalar
spanveya çizgi numaralarını öğe yerine konteynere koymak- Çizgilerin 1’den başladığını unutup track’leri çizgi gibi saymak
- Öğe yerleşimini ebeveyndeki
justify-contentpaketlemesiyle karıştırmak - Çizgi yerleşimi oturmadan adlandırılmış
grid-template-areas’a atlamak orderile görseli karıştırıp tab/kaynak sırasını bozmak
Özet
- Grid öğeleri çizgi yerleşimini, span’i ve öğe başına hizayı kontrol eder
grid-column/grid-rowbaşlangıç ve bitiş çizgilerini sabitlerspanbaşlangıç çizgisinden track’ler boyunca uzarplace-self(ve self özellikleri) tek çocuk için hücre hizasını ezer- Adlandırılmış şablon alanları sonraki Grid Areas dersinde gelir
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 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