CSS Grid Oyun Alanı Etkileşimli kontroller ile şablon sütunları, satırları ve boşlukları oluşturabileceğiniz görsel CSS Grid yapımcısı.

🎨

CSS Grid Oyun Alanı

Etkileşimli kontroller ile şablon sütunları, satırları ve boşlukları oluşturabileceğiniz görsel CSS Grid yapımcısı.

İzgara yapısını tanımla

Sütun ve satır sayısını ayarla veya özel şablon değerlerini gir.

Arayı ve hizalamayı ayarla

Sütun ve satır aralıklarını kontrol et ve justify-items ile align-items ayarlarını yap.

CSS'yi kopyala

İzgara düzenini önizle ve CSS kodunu kopyala.

Loading tool...

What Is CSS Grid Oyun Alanı?

CSS Grid Playground, CSS'deki en güçlü düzen sistemi olan CSS Grid düzenleri için etkileşimli bir yapımcıdır. Grid, hem satırlar hem de sütunlar üzerinde iki boyutlu kontrol sağlar ve bu nedenle karmaşık sayfa düzenleri için idealdir. Bu araç, iki mod sunar: otomatik mod, basit eşit-sütunlu ızgaralar için repeat(n, 1fr) kullanır, manuel mod ise 1fr 2fr 1fr veya 200px auto 200px gibi özel şablon değerlerini girmenize olanak tanır. Sütun ve satır aralıklarını bağımsız olarak kontrol edebilir ve ızgara hücreleri içindeki içerik hizalaması için justify-items ve align-items ayarlayabilirsiniz. Görsel ön izleme, renkli ızgara öğeleri gösterir, böylece düzen yapılandırmanızı tam olarak nasıl çalıştığını görebilirsiniz. Bu araç, hem Grid öğrenmek hem de üretim düzenlerini prototip etmek için mükemmeldir.

Why Use CSS Grid Oyun Alanı?

Esneklik için hem otomatik hem de özel şablon modları
Bağımsız sütun ve satır aralığı kontrolleri
Hücre içeriği hizalaması için justify-items ve align-items
Etkileşimli görsel önizleme ile renklendirilmiş ızgara öğeleri

Common Use Cases

Sayfa Düzenleri

Başlık, kenar çubuğu, içerik ve alt bilgi ile birlikte tam sayfa düzenlerini tasarla.

Görsel Galerileri

Tutarlı aralıklara sahip responsif görsel ızgara galerilerini oluştur.

Gösterge Tablosu Düzenleri

Farklı boyutlarda ızgara alanlarına sahip gösterge tablosu widget'larını oluştur.

CSS Grid'i Öğrenme

İki boyutlu düzenleri anlamak için ızgara özelliklerini dene.

Technical Guide

CSS Grid, bir kapsayıcıda display: grid ile etkinleştirilir. grid-template-columns, uzunluk değerleri, fr birimleri (kesirselli) veya repeat() ve minmax() gibi işlevler kullanarak sütun izleklerini tanımlar. Fr birimi, kullanılabilir alanı orantılı olarak dağıtır. grid-template-rows, satır izlekleri için aynı şekilde çalışır. gap (veya row-gap ve column-gap), izlekler arasındaki boşluğu ayarlar. justify-items ve align-items, ızgara hücreleri içindeki içeriklerin nasıl hizalandığını kontrol eder. İzgara öğeleri, grid-column: span n ve grid-row: span n kullanarak birden fazla hücreyi kapsayabilir. Adlı ızgara alanları kullanan grid-template-areas, karmaşık düzenleri tanımlamanın görsel bir yolunu sağlar. repeat() içindeki auto-fit ve auto-fill anahtar kelimeleri, medya sorguları olmadan duyarlı düzenler oluşturur: repeat(auto-fit, minmax(250px, 1fr)) en az 250px genişlikte olan sütunların sayısına göre sütun oluşturur.

Tips & Best Practices

1
Esnek, orantılı sütun boyutlandırma için fr birimlerini kullan
2
Responsif düzenler için medya sorguları olmadan minmax() ile auto-fit'i birleştir
3
Okunabilir, adlandırılmış düzen bölgeleri için grid-template-areas kullan
4
Tutarlı aralıklar için kenar boşlukları yerine boşluğu ayarla

Related Tools

CSS Flexbox Oyun Alanı

Tüm esnek konteynır özelliklerine sahip etkileşimli kontrollerle görsel CSS Flexbox keşfi.

🎨 CSS & Design

CSS Tablo Oluşturucu

Özelleştirilebilir renkler, çizgiler ve hover efektleri ile güzel bir şekilde stilize edilmiş HTML tablolar oluşturun.

🎨 CSS & Design

CSS Sütun Oluşturucu

Özel sütun sayısı, boşluk ve stil ile çok sütunlu metin düzenleri oluşturun.

🎨 CSS & Design

Cevrimiçi Tasarım Testeri

Yerleşik iframe görüntüleyici ile ortak cihaz kesme noktalarında web sitelerini önizleyin.

🎨 CSS & Design

Frequently Asked Questions

Q CSS Grid'de fr ne anlama geliyor?

fr, kullanılabilir alanı orantılı olarak dağıtan bir kesirli birimdir. 1fr 2fr, ikinci sütunun iki katı genişliğinde olduğu iki sütun oluşturur.

Q Responsif bir ızgara nasıl oluşturabilirim?

Kapsayıcı genişliğine bağlı olarak otomatik olarak sütunları ayarlayan bir ızgara için repeat(auto-fit, minmax(250px, 1fr)) kullan.

Q İzgara öğeleri çakışabilir mi?

Evet, açık yerleştirme kullanarak aynı hücreleri işgal edebilir ve katmanlı tasarımlar oluşturabilirler.

Q Grid ile Flexbox'u ne zaman kullanmalıyım?

İki boyutlu düzenler (satırlar ve sütunlar) için Grid. Tek boyutlu düzenler (tek satır veya sütun) için Flexbox.

Q CSS Grid tüm tarayıcılarda çalışıyor mu?

CSS Grid, tüm modern tarayıcılarda desteklenmektedir. IE11, bazı farklılıklarla daha eski bir Grid belirtimini destekler.

About This Tool

CSS Grid Oyun Alanı is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.