CSS Grid Oluşturucu
Etkileşimli önizleme ile CSS Grid düzenleri oluşturun.
Genişletilecek Hücreyi tıklayın
/* Contenedor */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 8px;
}Gorsel CSS Grid duzen olusturucu
CSS Grid Layout, CSS'de bulunan en guclu iki boyutlu duzen sistemidir. Tek boyutlu calisan Flexbox'in aksine, Grid satirlar ve sutunlarda ayni anda calisir ve bu da onu tam sayfa duzenleri, pano panelleri ve karmasik icerik yapilari icin ideal kilar.
Gorsel olusuturucumuz, sutun ve satir sayisini tanimlamaniza, boyut sablonlarini (grid-template-columns/rows) ozellestirmenize, gap'leri ayarlamaniza ve her hucresi icin alan atamaniza olanak tanir. Hucreleri birden fazla satir veya sutuna genisletebilir ve bunu manuel CSS yazmadan yapabilirsiniz.
On izleme, grid'inizin tam olarak nasil gorunecegini gostererek gercek zamanli olarak guncellenir. Herhangi bir hucreye tiklayarak genisletin ve olusturulan CSS kodunu kopyalayarak projenizde kullanin.
Sıkça sorulan sorular
"fr" birimi ne anlama gelir?
"fr" (kesir) birimi, grid kapsayicisindaki kullanilabilir alanin bir kismini temsil eder. Ornegin, "1fr 2fr" ikincisi birincisinin iki kati genislikte olan iki sutun olusturur. Oranlari tanimlamak icin flex-grow'a benzer ancak daha sezgiseldir.
CSS Grid, Flexbox'in yerini mi alir?
Hayir, birbirlerini tamamlarlar. Grid, iki boyutlu duzenler (satirlar ve sutunlar) icin daha iyidir; Flexbox ise tek boyutlu duzenler (tek satir veya sutun) icin daha uygundur. Sayfanin genel yapisi icin Grid, her bolum icindeki icerigi hizalamak icin Flexbox kullanmak yaygindir.
Bir hucrenin birden fazla sutunu kaplamasini nasil saglarim?
Aracimizda hucreye tiklayin ve genisletmek icin "+" dugmelerini kullanin. CSS'de bu, "grid-column: span 2" (2 sutun icin) veya "grid-row: span 2" (2 satir icin) ile saglanir. Ayrica "grid-column: 1 / 3" ile tam konumlari da belirtebilirsiniz.
Daha fazla bilgi ister misiniz? Tam rehberimizi okuyun →