CSS Grid Konteyner
Grid girişi ebeveynleri kafese çevirdi. Bu ders konteynerde kalır: track tanımlayın, gap koyun, öğeleri hücrelerde hizalayın ve boş alan kalınca tüm grid’i paketleyin. Öğe span’i ve adlandırılmış alanlar Grid Items ile Grid Areas’ı bekler.
Grid konteyner araç seti
📊 Grid konteyner bir bakışta
| Özellik | Günlük iş |
|---|---|
grid-template-columns |
Sütun track boyutlarını tanımlar |
grid-template-rows |
Satır track boyutlarını tanımlar |
gap |
Track’ler arası oluklar |
justify-items / align-items |
Her öğeyi kendi hücresinde hizalar (inline / block ekseni) |
justify-content / align-content |
Grid konteynerden küçükken tüm grid’i konumlar |
grid-auto-flow |
Otomatik yerleştirme paketleme sırasını kontrol eder (row veya column) |
Önce track’leri çizin. Sonra hücrelerin içeriği nasıl hizalayacağına karar verin; ancak ondan sonra tüm grid çevresindeki kalan alanın nasıl davranacağını düşünün.
Şablon track’leri — sütunlar ve satırlar
grid-template-columns ve grid-template-rows kafesi taslaklar. Günlük panolar için fr, uzunluk ve repeat() karıştırın.
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
min-height: 16rem;
}
gap — olukları dürüst tutun
gap (veya row-gap / column-gap) her çocuğa margin hilesi olmadan track’leri aralar.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem 1.25rem;
}
justify-items ve align-items — hücrenin içinde
Bunlar her öğeyi kendi hücresinde hizalar. justify-items inline ekseninde; align-items block ekseninde. İçerik paketlemeyle karıştırmayın.
.board {
display: grid;
grid-template-columns: repeat(2, 8rem);
justify-items: center;
align-items: center;
gap: 0.75rem;
}
justify-content ve align-content — grid’i paketle
Track’ler konteynerden küçükken content özellikleri tüm grid’i kaydırır veya aralar. Sonsuza kadar esnememesi gereken ikon panoları için yararlıdır.
.board {
display: grid;
grid-template-columns: repeat(3, 6rem);
justify-content: space-between;
align-content: start;
gap: 0.5rem;
min-height: 12rem;
}
Sakin bir grid konteyner alışkanlığı
Önce şablon sütun ve satırlar, sonra gap, sonra hücrede öğe hizası, sonra boş alan kalırsa content paketleme. Otomatik yerleştirme sırası önemliyse grid-auto-flow’a bakın. Span, satır numaraları ve adlandırılmış alanları sonraki Grid derslerine bırakın.
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr;
gap: 1.25rem;
justify-items: stretch;
align-items: stretch;
}
Kendiniz deneyin
- Üç
1frsütun veauto 1fr autosatırlı bir pano yapın. gap: 1remekleyin.- Hücre içeriğini
justify-itemsvealign-itemsile ortalayın. - Sabit track’li bir panoyu
justify-content: space-betweenile paketleyin. - Grid Items veya Grid Areas için saklayacağınız bir özelliği yazın.
Yaygın hatalar
justify-items(hücrelerde) ilejustify-content(tüm grid) karıştırmak- Öğe
spanveya alan adlarını konteynere erken koymak - Yalnızca sütun tanımlayıp rastgele satır yüksekliklerine şaşırmak
- Flex
growalışkanlıklarını grid konteynere taşımak - Bu dersi tüm Areas modülü sanmak
Özet
- Grid konteyner özellikleri track, oluk ve hizayı tanımlar
grid-template-columns/rowskafesi taslaklarjustify-items/align-itemshücrede içeriği hizalarjustify-content/align-contentboş alanda grid’i paketler- Öğe span’i ve adlandırılmış alanlar sonraki Grid derslerinde 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