Generator CSS Grid
Buat deklarasi CSS Grid container — display: grid dengan kolom lebar sama, baris tinggi sama, dan gap — dari kontrol kolom/baris/gap sederhana.
Input
Output
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-grid-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"columns": "3",
"rows": "2",
"gap": "16"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-grid-generator` tool (CSS Grid Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-grid-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Generator CSS Grid — 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/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa itu CSS Grid?
CSS Grid adalah sistem tata letak yang dibangun untuk desain dua dimensi — baris dan kolom sekaligus, tidak seperti Flexbox yang meletakkan item di sepanjang satu sumbu. Mengubah elemen apa pun menjadi grid membutuhkan satu deklarasi, display: grid;, ditambah deskripsi jalur yang harus dimilikinya. Alat ini menghasilkan deklarasi tersebut untuk kasus yang paling umum: grid yang terbagi rata dengan kolom lebar sama dan baris tinggi sama, dengan jarak konsisten antar sel.
Properti yang dihasilkan alat ini
display: grid;— mengubah elemen menjadi container grid; anak-anak langsungnya secara otomatis menjadi grid item.grid-template-columns: repeat(N, 1fr);— membuatNkolom, masing-masing mengambil fraksi yang sama (1fr) dari lebar yang tersedia.repeat()adalah singkatan untuk menulis1frNkali.grid-template-rows: repeat(M, 1fr);— ide yang sama diterapkan pada baris:Mbaris tinggi sama.gap: Npx;— ruang antara baris dan kolom, menggantikan pasangangrid-row-gap/grid-column-gaplama dengan singkatan tunggal.
Cara menggunakan alat ini
- Seret slider Kolom untuk mengatur berapa banyak kolom lebar sama yang harus dimiliki grid (1–12).
- Seret slider Baris untuk mengatur berapa banyak baris tinggi sama yang harus dimiliki (1–12).
- Seret slider Gap untuk mengatur jarak, dalam piksel, antara sel grid.
- Salin CSS yang dihasilkan dari kotak CSS, atau unduh sebagai file
.css, dan terapkan ke elemen container Anda — misalnya,.grid-container { ...CSS yang dihasilkan... }.
Output diperbarui secara instan saat Anda menggerakkan slider apa pun — tidak ada langkah "generate" terpisah.
FAQ
Apakah saya perlu menambahkan sesuatu ke elemen anak?
Tidak. Setelah induk memiliki display: grid; dan jalur template, anak langsung ditempatkan secara otomatis, mengisi sel dari kiri ke kanan, atas ke bawah. Anda hanya memerlukan CSS tambahan pada anak jika Anda menginginkan untuk merentang di beberapa sel (grid-column: span 2;) atau duduk di tempat tertentu.
Apa arti 1fr?
fr singkatan untuk "fraction" — unit unik untuk Grid. 1fr berarti "satu bagian dari ruang apa pun yang tersisa setelah jalur ukuran tetap dan gap diperhitungkan." Karena setiap kolom di sini menggunakan 1fr, lebar yang tersedia terbagi rata di semua kolom, dan grid mengubah ukuran secara otomatis dengan container.
Bisakah saya membuat kolom dengan lebar berbeda, seperti 200px 1fr 200px?
Alat ini berfokus pada kasus kolom-sama/baris-sama, yang mencakup sebagian besar tata letak grid (galeri gambar, grid kartu, dashboard). Untuk jalur fixed/flexible campuran, ganti nilai repeat(N, 1fr) yang dihasilkan dengan daftar ukuran terpisah Anda sendiri (200px 1fr 200px) — sisa deklarasi tetap tidak berubah.
Apa perbedaan antara gap dan margin/padding?
gap hanya menambahkan ruang antara sel grid — tidak pernah menambahkan ruang di sekitar tepi luar container grid dengan cara margin atau padding. Itu membuat pilihan yang lebih dapat diprediksi untuk jarak internal yang konsisten.
Apakah CSS Grid didukung di semua browser?
Ya. display: grid dan properti yang dihasilkan alat ini telah didukung, tanpa awalan, di setiap browser utama sejak 2017.
Privasi
Semuanya terjadi di browser Anda. Tidak ada CSS, nilai, atau pengaturan yang Anda masukkan pernah dikirim ke server — deklarasi dihasilkan dan diperbarui secara lokal saat Anda menyesuaikan slider.