Yerleşim için CSS Grid
CSS Grid ile satır ve sütunları tanımlayın, öğeleri hassas biçimde yerleştirin ve az kodla yaygın sayfa yerleşimleri oluşturun.
Yerleşim için CSS Grid, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
CSS Grid Nedir
CSS Grid, hem satırları hem de sütunları denetlediğiniz iki boyutlu bir düzen sistemidir. Genel sayfa yapısı ve öğeleri tanımlı bir ızgaraya açıkça yerleştirmek için en iyi araçtır.
Sütunları Tanımlama: grid-template-columns
grid-template-columns sütun yapısını tanımlar. Sabit boyutlar (px), esnek kesirler (fr) veya auto kullanın. repeat(n, size) bir iz tanımını tekrarlar.
.layout {
display: grid;
grid-template-columns: 240px 1fr; /* sidebar + main */
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}fr Birimi
fr (kesir birimi), kalan alanı orantılı olarak dağıtır. 1fr 2fr, ikinci sütuna ilkinin iki katı kadar alan verir. Akışkan ızgara izleri için vazgeçilmezdir.
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* left center right */
}Satırları Tanımlama: grid-template-rows
Satırları da açıkça tanımlayabilirsiniz. Tanımlamazsanız tarayıcı örtük satırları otomatik olarak oluşturur. grid-auto-rows: minmax(200px, auto), örtük satırların boyutunu belirler.
.page {
display: grid;
grid-template-rows: auto 1fr auto; /* header content footer */
min-height: 100vh;
}Grid'de gap
Flexbox'ta olduğu gibi gap, dış kenarları etkilemeden ızgara izleri arasına boşluk ekler. row-gap ve column-gap eksenleri ayrı ayrı denetler.
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}grid-template-areas
Izgara alanlarını dizelerle adlandırın ve grid-area kullanarak öğeleri bu alanlara atayın. Okunabilir ve görsel düzen kodu oluşturur.
.page {
display: grid;
grid-template-areas:
'header header header'
'sidebar main main'
'footer footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Öğeleri grid-column ve grid-row ile Yerleştirme
grid-column: start / end ve grid-row: start / end kullanarak bir öğenin tam olarak nereye yerleşeceğini denetleyin. Son satıra başvurmak için -1 kullanın. span N, N iz boyunca uzanır.
.featured {
grid-column: 1 / -1; /* span all columns */
grid-row: span 2; /* occupy two rows */
}auto-fit ve minmax() — Duyarlı Sütunlar
En güçlü tek satırlık duyarlı ızgara tanımı: repeat(auto-fit, minmax(280px, 1fr)). Sığabildiği kadar sütun oluşturur; her biri en az 280px genişliğindedir ve kalan alanı 1fr ile doldurur.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}auto-fill ve auto-fit Karşılaştırması
auto-fill, boş olsalar bile izler oluşturur ve sabit bir ızgarayı korur. auto-fit, boş izleri daraltarak öğelerin satırı dolduracak şekilde genişlemesini sağlar. İçeriğin genişlemesini istiyorsanız auto-fit kullanın.
Örtük ve Açık Izgara
Sizin tanımladığınız izler açık ızgarayı oluşturur. Tanımlanan izlerden daha fazla öğe eklediğinizde tarayıcı örtük izler oluşturur. Bunların boyutunu grid-auto-rows ve grid-auto-columns ile denetleyin.
Grid ve Flexbox — Her Biri Ne Zaman Kullanılır
Grid: iki boyutlu düzenler, sayfa yapısı, galeriler, gösterge panelleri. Flexbox: tek boyutlu satırlar veya yığınlar, ortalama, bir satırdaki öğeleri dağıtma. Birbirlerini tamamlarlar — sayfa iskeleti için Grid'i, bileşenlerin iç yapısı için Flexbox'ı kullanın.
Kısa Kontrol
En az 250px genişliğinde olan ve kalan alanı eşit paylaşan sütunları hangi CSS değeri oluşturur?
Özet: CSS Grid
grid-template-columns sütunları tanımlar. fr alanı paylaşır. repeat() tekrarları kolaylaştırır. gap oluklar ekler. grid-template-areas düzenleri okunabilir hâle getirir. auto-fit + minmax, medya sorguları olmadan duyarlı ızgaralar oluşturur. Grid, iki boyutlu sayfa düzenleri için başvurulacak araçtır.
Sıkça Sorulan Sorular
“Yerleşim için CSS Grid” dersi ücretsiz mi?
Evet — “Yerleşim için CSS Grid” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Yerleşim için CSS Grid” dersinde ne öğreneceğim?
CSS Grid ile satır ve sütunları tanımlayın, öğeleri hassas biçimde yerleştirin ve az kodla yaygın sayfa yerleşimleri oluşturun. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Yerleşim için CSS Grid” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Viewport Meta Etiketi
- Yerleşim için Flexbox
- Yerleşim için CSS Grid
- Medya Sorguları ve Mobil Öncelikli Geliştirme