Initializing, please wait a moment

Generator Tata Letak CSS Grid - Langkah demi Langkah

Generator Tata Letak CSS Grid membuat blok CSS display: grid yang siap ditempel dalam tiga langkah: atur jumlah kolom dan baris, atur jarak antar sel, lalu salin hasilnya. Tidak ada yang diunggah dan tidak perlu instalasi.


Langkah 1 - atur kolom dan baris

Buka Generator Tata Letak CSS Grid. Geser penggeser Columns (1 sampai 12) dan penggeser Rows (1 sampai 6) sesuai tata letak yang Anda inginkan - grid pratinjau di sebelah kanan langsung menggambar ulang sel-selnya.


Langkah 2 - atur jarak antar sel

Geser penggeser Column gap dan Row gap (masing-masing 0px sampai 50px) untuk mengatur jarak antar sel. Grid pratinjau dan teks CSS yang dihasilkan di bawahnya diperbarui secara langsung dengan nilai piksel yang tepat.


Langkah 3 - salin hasilnya

Klik "Copy CSS" untuk menyalin blok yang dihasilkan ke clipboard. Jika browser memblokir akses clipboard, pesan status akan meminta Anda memilih dan menyalin teks secara manual. Seluruh halaman berjalan di browser, jadi tidak ada nilai penggeser yang dikirim ke server.

← alat pengembang

Reviewed by the Free Tool Online editorial team · Tested in the current versions of Chrome, Firefox, Safari, and Edge before publishing. No account is needed to use any tool. Report a bug - we triage within 72 hours. · Last refreshed April 2026.

Why trust these tools

  • Ten-plus years of web tooling. The freetoolonline editorial team has shipped browser-based utilities since 2015. The goal has never changed: get you to a working output fast, without an install.
  • No install, no sign-up. Open a tool and get a working output in seconds - nothing to download and no account to create. Tools that need heavy processing run it on our service, so even a low-powered machine gets the job done.
  • Analytics stops at the page view. We measure which pages get visited, not what you type or upload inside a tool. There is nothing to sign in to and no profile is attached to your input.
  • Open-source core components. The processing engines underneath (libheif, libde265, pdf-lib, terser, clean-css, ffmpeg.wasm, and others) are public and audit-able. We link to each one in its tool page's footer.
  • Free, with or without ads. All tools are fully functional without sign-up. The Disable Ads button in the header is always available if you need a distraction-free run.

Related tools:

Related guides: