Pembuat Kolom CSS Buat tata letak teks multi-kolom dengan jumlah kolom, jarak, dan gaya aturan yang dapat disesuaikan.

🎨

Pembuat Kolom CSS

Buat tata letak teks multi-kolom dengan jumlah kolom, jarak, dan gaya aturan yang dapat disesuaikan.

Tentukan jumlah kolom atau lebar

Pilih antara mode jumlah kolom tetap atau lebar kolom responsif.

Gaya aturan kolom

Set ukuran celah dan kostumisasi gaya garis pembagi, lebar, dan warna.

Salin CSS

Pratinjau tata letak teks multi-kolom dan salin CSS.

Loading tool...

What Is Pembuat Kolom CSS?

Generator Kolom CSS membuat tata letak teks multi-kolom yang mengingatkan pada desain koran atau majalah. Modul tata letak multi-kolom CSS memungkinkan konten mengalir di seluruh kolom secara otomatis, dan alat ini memberi Anda kontrol visual atas semua properti kunci. Anda dapat memilih antara column-count (jumlah kolom tetap) atau column-width (kolom responsif yang disesuaikan berdasarkan lebar wadah). Properti column-gap mengontrol spasi antar kolom, dan column-rule menambahkan garis pembagi terlihat antar kolom dengan gaya, lebar, dan warna yang dapat disesuaikan. Pratinjau menunjukkan pengaturan Anda diterapkan pada teks sampel, menunjukkan bagaimana konten mengalir di seluruh kolom. Teknik tata letak ini sangat baik untuk halaman teks berat, artikel, dan dokumentasi.

Why Use Pembuat Kolom CSS?

Alih antara mode column-count dan column-width
Aturan kolom dapat dikostumisasi dengan gaya, lebar, dan warna
Pratinjau waktu nyata dengan teks contoh yang mengalir
Tujuh pilihan gaya aturan termasuk solid, dashed, dan dotted

Common Use Cases

Tata Letak Artikel

Buat tata letak artikel multi-kolom gaya koran untuk keterbacaan yang lebih baik.

Halaman Dokumentasi

Gunakan kolom untuk glosarium, indeks, dan halaman referensi.

Daftar Kartu

Atur konten seperti kartu dalam tata letak multi-kolom gaya masonry.

Konten Footer

Organisir link dan informasi footer ke dalam kolom yang rapi.

Technical Guide

Modul multi-kolom CSS menggunakan column-count untuk menentukan jumlah kolom yang tepat atau column-width untuk menetapkan lebar kolom minimum (browser menentukan hitungan optimal). Properti column-gap mengatur spasi antar kolom. column-rule adalah singkatan dari column-rule-width, column-rule-style, dan column-rule-color, menambahkan garis pembagi terlihat antar kolom. Konten mengalir secara otomatis dari satu kolom ke kolom lainnya. Untuk mencegah elemen dipotong di seluruh kolom, gunakan break-inside: avoid. Properti column-span: all membuat elemen menyebar di semua kolom (berguna untuk judul). Tata letak kolom bekerja dengan baik untuk konten teks tetapi dapat menyebabkan masalah dengan elemen interaktif atau gambar. Untuk desain responsif, column-width umumnya lebih disukai daripada column-count karena menyesuaikan diri dengan lebar wadah secara alami.

Tips & Best Practices

1
Gunakan column-width untuk tata letak responsif yang menyesuaikan dengan ukuran wadah
2
Tambahkan break-inside: avoid untuk mencegah pemutusan konten yang tidak diinginkan
3
Gunakan column-span: all untuk judul yang harus melintang semua kolom
4
Jaga jumlah kolom kurang dari 4 untuk kenyamanan membaca di layar

Related Tools

Tanah Main CSS Flexbox

Penggalang CSS Flexbox visual dengan kontrol interaktif untuk semua properti wadah fleksibel.

🎨 CSS & Design

Papan Kerja CSS Grid

Pembangun CSS Grid visual dengan kontrol interaktif untuk kolom templat, baris, dan celah.

🎨 CSS & Design

Pengujian Desain Responsif

Pratinjau situs web pada titik breakpoint perangkat yang umum dengan viewer iframe bawaan.

🎨 CSS & Design

Generator Skala Tipografi

Buat skala tipografi modular dengan ukuran dasar, rasio, dan satuan yang dapat disesuaikan.

🎨 CSS & Design

Frequently Asked Questions

Q Apa perbedaan antara column-count dan column-width?

column-count menetapkan jumlah kolom yang tetap. column-width menetapkan lebar minimum dan membiarkan browser menentukan jumlah responsif.

Q Bisakah saya mencegah konten dari pemutusan antar kolom?

Ya, gunakan break-inside: avoid pada elemen yang tidak boleh terpisah di antara kolom.

Q Apakah tata letak multi-kolom bekerja dengan gambar?

Ya, tetapi gambar besar mungkin menyebabkan masalah tata letak. Gunakan break-inside: avoid pada wadah gambar.

Q Bisakah saya membuat elemen melintang semua kolom?

Ya, gunakan column-span: all pada elemen apa pun untuk membuatnya melintang seluruh lebar di semua kolom.

Q Apakah tata letak multi-kolom didukung di semua browser?

Ya, CSS multi-column layout didukung di semua browser modern.

About This Tool

Pembuat Kolom CSS 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.