Lewati ke konten utama
iotools.cloudiotools.cloud

Generator Kolom CSS

API reference

Buat tata letak multi-kolom CSS — jumlah kolom, lebar, celah, dan garis pemisah — dengan pratinjau langsung gaya koran, lalu salin CSS dan HTML.

Input

0 = otomatis. Jika lebar diatur, browser mungkin menggunakan lebih sedikit kolom daripada jumlah yang ditentukan saat ruang sempit.

Output

Tata letak kolom Anda akan muncul di sini.

CSS
HTML
Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-columns-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{}'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `css-columns-generator` tool (CSS Columns Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/css-columns-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Generator Kolom CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Tata letak multi-kolom CSS mengalirkan satu blok konten ke beberapa kolom, seperti koran, tanpa markup tambahan. Generator ini memungkinkan Anda mengatur jumlah kolom, lebar yang diinginkan, celah, dan garis pemisah, menampilkan pratinjau langsung, serta memberi Anda CSS untuk disalin.

Cara menggunakannya

  1. Atur jumlah kolom (1–6), atau tambahkan lebar kolom agar browser memilih berapa banyak kolom yang muat.
  2. Sesuaikan celah antar kolom.
  3. Pilih garis pemisah: gaya, lebar, dan warna. Pilih "Tidak ada" untuk menghapusnya.
  4. Salin CSS dan HTML.

Jumlah vs. lebar

column-count menetapkan jumlah kolom. column-width menetapkan lebar ideal dan membiarkan browser memuat sebanyak mungkin kolom. Saat keduanya diatur, shorthand columns: 200px 3 berarti "hingga 3 kolom, masing-masing minimal 200px lebarnya", dan ini biasanya dipakai agar tata letak menyusut dengan baik di layar kecil.

Tips

  • Kolom cocok untuk teks panjang. Untuk grid kartu dan tata letak halaman, gunakan CSS Grid, lihat CSS Grid Generator.
  • Gunakan break-inside: avoid pada elemen anak seperti gambar yang tidak boleh terpecah di antara kolom.
  • Garis pemisah tidak memakan ruang sendiri. Garis ini berada di tengah celah.

Privasi

Semua berjalan di browser Anda. Pengaturan Anda tidak pernah diunggah.

css columnsmulti column layoutcolumn-countcolumn-gapcolumn-rulenewspaper layouttext columns

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan