CSS Duyarlı Grid
Grid Areas sayfa haritasına isim vermeyi öğretti. Duyarlı Grid sorar: viewport daralınca ne olur? Sütunlar çöker mi? Kenar çubuğu başlığın altına iner mi? Kartlar ikinci HTML olmadan akar mı? Birkaç sakin breakpoint kalıbı — Responsive Design modülü sırada.
Duyarlı grid araç kutusu
📊 Duyarlı grid bir bakışta
| Araç | Günlük iş |
|---|---|
grid-template-columns |
Media query içinde iz listesini değiştir (ör. iki sütun → bir) |
grid-template-areas |
Yan yana yerine üst üste daha iyiyse adlı haritayı yeniden çiz |
repeat(auto-fit, minmax(...)) |
Adet başına breakpoint olmadan akıcı kart sütunları |
| Media query | Grid değişikliklerini yalnızca viewport eşleşince uygula |
gap |
İz veya harita değişince ritmi koru |
| Genişlik başına ekstra HTML yok | Aynı DOM; CSS düzeni taşır |
Geniş ekranda güvendiğiniz grid ile başlayın. Tek net breakpoint’te sütun, satır veya alan haritasını değiştirin — hepsini birden değil. Önceki dersteki adlar duyarlı yenilemeyi okunur kılar.
Breakpoint’te sütunlar
İki sütunlu kabuk telefonda tek sütun olacaksa media query içinde grid-template-columns değiştirin.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}
@media (max-width: 40rem) {
.shell {
grid-template-columns: 1fr;
}
}
Dar ekranda alan haritasını yeniden çizin
header / aside / main yan yana haritalar, kenar çubuğu başlığın altına inince sık sık yeni bir grid-template-areas bloğu ister. Tırnaklı satırları yeniden yazın; bölgeler dikdörtgen kalsın.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
@media (max-width: 48rem) {
.shell {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"aside"
"main"
"footer";
}
}
Kart panoları için auto-fit ve minmax
Galeri ve panolarda repeat(auto-fit, minmax(...)) sütunların alana göre görünüp sarmasını sağlar — çoğu zaman daha az elle ayarlı breakpoint.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
Dar viewport farklı layout dili değil — aynı grid araçları, farklı izler veya haritalar. «Mobil HTML» kopyalamak yerine CSS.
Sakin duyarlı grid alışkanlığı
Önce bir ana breakpoint. Etiketler yardım edince sütun değişimini harita yenilemeyle eşleştirin. Kart sayısı esnek olacaksa auto-fit. DOM sırası klavye için mantıklı kalsın. Tam responsive teori sonraki modülde.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas: "nav content";
gap: 1.25rem;
}
@media (max-width: 42rem) {
.page {
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"content";
}
}
.stats {
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr));
gap: 0.75rem;
}
@media (max-width: 36rem) {
.stats {
grid-template-columns: 1fr;
}
}
Kendiniz deneyin
max-width: 40remaltında iki sütunlu kabuğu teke indirin.- Dar üst üste için header / aside / main / footer haritasını yeniden yazın.
repeat(auto-fit, minmax(14rem, 1fr))ile kart satırı kurun.- Tek sakin breakpoint — tüm grid’i bir anda sıfırlamayın.
- Tek HTML ağacı; sırada Responsive Design.
Sık hatalar
- Sütun değiştirmek veya üst üste dizmek yerine izleri sonsuza küçültmek
- CSS’te grid güncellemek yerine ayrı «mobil HTML»
grid-template-areassatırlarını değiştirirken hücre sayısı uyuşmazlığı- Her şeyi sıfırlayan dev media query
- Bu dersi tüm Responsive kursu sanmak
Özet
- Duyarlı grid sütun, harita ve auto-fit panoları genişliğe uyarlar
- Media query’ler iz ve harita değişimini sınırlar
- Adlı areas küçük ekranda harita yenilemeyle iyi gider
- Sakin breakpoint’ler ve tek DOM
- Grid modülü (490–530) bitti; Responsive Design sırada
🧠 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