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

🎨

CSS Sütun Oluşturucu

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

Sütun sayısını veya genişliğini ayarla

Sabit sütun sayısı veya响ponsive sütun genişliği modu arasında seçim yapın.

Sütun kurallarını stillendir

Aralık boyutunu ayarlayın ve ayırıcı çizgi stilini, genişliğini ve rengini özelleştirin.

CSS'yi kopyalayın

Çok sütunlu metin düzeninin ön izlemesini görüntüleyin ve CSS'yi kopyalayın.

Loading tool...

What Is CSS Sütun Oluşturucu?

CSS Sütun Oluşturucu, gazete veya dergi tasarımlarını anımsatan çok sütunlu metin düzenleri oluşturur. CSS çok sütunlu düzen modülü, içeriğin otomatik olarak birden fazla sütuna akmasını sağlar ve bu araç size tüm ana özellikler üzerinde görsel kontrol sağlar. Sabit sayıda sütun (column-count) veya konteynır genişliğine göre ayarlanan responsiv sütunlar (column-width) arasında seçim yapabilirsiniz. column-gap özelliği, sütunlar arasındaki boşluğu kontrol eder ve column-rule, özelleştirilebilir stil, genişlik ve renk ile sütunlar arasında görünür bir ayırıcı çizgi ekler. Ön izleme, örnek metne uygulanan ayarlarınızı gösterir ve içeriğin sütunlar boyunca nasıl aktığını示strar. Bu düzen tekniği, yoğun metin içerikli sayfalar, makaleler ve belgeler için mükemmeldir.

Why Use CSS Sütun Oluşturucu?

Sütun sayısı ve sütun genişliği modları arasında geçiş yapın
Stil, genişlik ve renk seçenekleri ile özelleştirilebilir sütun kuralı
Akışkan örnek metin ile gerçek zamanlı ön izleme
Katı, noktalı ve çizgili dahil yedi kural stili seçeneği

Common Use Cases

Makale Düzenleri

Daha iyi okunabilirlik için gazete tarzı çok sütunlu makale düzenleri oluşturun.

Belge Sayfaları

Sözlükler, dizinler ve referans sayfaları için sütunları kullanın.

Kart Listeleri

Kart benzeri içeriği bir masonry tarzı çok sütunlu düzende düzenleyin.

Alt Bilgi İçeriği

Alt bilgi bağlantılarını ve bilgilerini düzenli sütunlara organize edin.

Technical Guide

CSS çok sütunlu modülü, tam olarak kaç sütunun belirtmek için column-count veya minimum sütun genişliğini ayarlamak için column-width kullanır (tarayıcı optimal sayıyı belirler). column-gap özelliği, sütunlar arasındaki boşluğu ayarlar. column-rule, column-rule-genişlik, column-rule-stil ve column-rule-rengi için kısaltmadır ve sütunlar arasında görünür bir ayırıcı ekler. İçerik otomatik olarak bir sütundan diğerine akar. Öğeleri sütunlar boyunca bölünmekten ngănlemek için break-inside: avoid kullanın. column-span: all özelliği, bir öğenin tüm sütunları kapsamasını sağlar (başlıklar için faydalıdır). Sütun düzenleri, metin içeriği için iyi çalışır ancak etkileşimli öğeler veya resimler ile sorunlara neden olabilir. Responsiv tasarımlar için, column-count yerine genellikle column-width tercih edilir, çünkü doğal olarak konteynır genişliğine uyar.

Tips & Best Practices

1
Konteynır boyutuna uyum sağlayan responsif düzenler için sütun-genişliğini kullanın
2
Garip içerik kesmeleri önlemek için break-inside: avoid ekleyin
3
Tüm sütunları kapsayan başlıklar için column-span: all kullanın
4
Rahat ekran okunabilirliği için sütun sayısını 4'ten az tutun

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 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 & Design

Cevrimiçi Tasarım Testeri

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

🎨 CSS & Design

Tipografi Ölçeği Oluşturucu

Özelleştirilebilir temel boyut, oran ve birimlerle modüler bir tipografik ölçek oluşturun.

🎨 CSS & Design

Frequently Asked Questions

Q Sütun sayısı ve sütun genişliği arasındaki fark nedir?

Sütun sayısı, sabit bir sütun sayısı ayarlar. Sütun genişliği, minimum bir genişlik ayarlar ve tarayıcı responsif olarak sayıyı belirler.

Q İçeriği sütunlar arasında kesilmekten alıkoyabilir miyim?

Evet, sütunlar arasında bölünmemesi gereken öğeler için break-inside: avoid kullanın.

Q Çok sütunlu düzen resimler ile çalışır mı?

Evet, ancak büyük resimler düzen sorunlarına neden olabilir. Resim konteynırları için break-inside: avoid kullanın.

Q Bir öğeyi tüm sütunlar boyunca kapsayabilir miyim?

Evet, herhangi bir öğe üzerinde column-span: all kullanarak tüm sütunların genişliğini kapsamasını sağlayabilirsiniz.

Q Çok sütunlu düzen tüm tarayıcılarda destekleniyor mu?

Evet, CSS çok sütunlu düzen tüm modern tarayıcılar tarafından desteklenmektedir.

About This Tool

CSS Sütun Oluşturucu 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.