Generator tata letak CSS

Lihat pratinjau tata letak Flexbox atau Grid.

Di perangkat Anda · Tanpa akun

Generator tata letak CSS memproses masukan Anda di browser ini. Masukan dan hasil tidak disertakan dalam analitik. Daftar alat terbaru menyimpan nama alat, jumlah kunjungan, dan waktu kunjungan terakhir. Daftar alat tersimpan hanya menyimpan namanya. Penyimpanan draf bersifat opsional dan tetap berada di perangkat ini; hapus teks tersimpan melalui kontrol draf. Memuat teks dari URL bersifat opsional dan menghubungi server tersebut; server dapat melihat URL itu dan alamat IP Anda. Tindakan opsional “Gunakan di” menyimpan data yang akan diteruskan dalam tab ini. Alat berikutnya menghapus data itu saat dibuka dan mengabaikannya jika sudah lebih dari satu menit.

Salin tautan menyertakan masukan yang Anda pilih untuk dibagikan dalam alamat tautan. Siapa pun yang memiliki tautan itu dapat membuka kembali masukan tersebut. File dan hasil yang dihasilkan tidak disertakan. Alat kata sandi dan kunci hanya membagikan pengaturan.

Bahasa Indonesia

Label item, satu per baris

Tata letak

Opsi dan file di perangkat ini

Kolom Grid

Jarak (px)

Flex basis (px)

Buka file teks di perangkat ini

Pengaturan opsional hanya berlaku di tab ini.

Hasil

Kode sumber HTML

Lainnya

Pintasan keyboard

Tentang tautan dan reset

Tautan memuat input dan pengaturan Anda. Siapa pun yang memiliki tautan dapat melihatnya, jadi jangan sertakan teks pribadi. File dan hasil yang dibuat tidak disertakan; pengacakan akan dijalankan ulang.

Reset memuat ulang alat dengan nilai awalnya serta melepaskan file yang terbuka dan kontrol perangkat. Draf tersimpan tetap ada di perangkat ini sampai Anda menghapusnya.

Cara kerja generator tata letak CSS

Buat tata letak Grid responsif atau Flexbox yang membungkus item ke baris berikutnya dari label item. Ubah jumlah kolom Grid, jarak, atau flex basis, lalu salin atau unduh HTML mandiri yang sama dengan yang digunakan dalam pratinjau.

Berikutnya: Perapih kode CSS

Berikutnya: Kalkulator spesifisitas CSS

Berikutnya: Cek rasio kontras WCAG

Contoh

Grid tiga kolom menggunakan repeat(3, minmax(0, 1fr)) agar label panjang dapat membungkus ke baris berikutnya di dalam kolom yang sama lebar. Flexbox membungkus item sesuai ukuran dasar yang diinginkan dan ruang yang tersedia.

Sebelum menggunakan hasil

Alat ini menyediakan dasar tata letak, bukan pembuat situs lengkap atau pemeriksaan kompatibilitas browser. Pratinjau memakai gaya contoh yang tetap. Grid mempertahankan jumlah kolom yang dipilih pada lebar sempit; tambahkan media query jika desain akhir Anda membutuhkan jumlah kolom yang berbeda.

Kutip halaman ini

Gaya sitasi

ToolOctopus. “Generator tata letak CSS.” Diperbarui 7 Oktober 2026. https://tooloctopus.com/id/generator-tata-letak-css.

Tambahkan tanggal akses jika pedoman yang Anda ikuti mewajibkannya.

Format sitasi menggunakan citeproc-js buatan Frank Bennett dan gaya Citation Style Language. Lisensi dan kode sumber.