Daily Toolkits

Pembuat Kotak CSS

Tentukan kolom, baris, dan celah secara visual, lalu salin kode template CSS Grid untuk tata letak Anda.

CSS Grid Generator

Live
1
2
3
4
5
6
7
8
9

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

  • Tentukan kolom, baris, dan celah secara visual, lalu salin kode template CSS Grid.
  • Berjalan di browser Anda
  • Gratis untuk digunakan

Cara penggunaan

  1. Tetapkan jumlah kolom dan baris.
  2. Tune gap dan ukuran track.
  3. Salin CSS kisi.

How this tool works

  1. Tetapkan jumlah kolom dan baris.
  2. Tune gap dan ukuran track.
  3. Salin CSS kisi.

Recommended settings

  • Gunakan opsi default terlebih dahulu, lalu sesuaikan jika perlu

Supported formats

Text / on-page input

File size and limits

  • Pratinjau multi-lapis yang sangat rumit mungkin terasa lebih lambat di ponsel lama.

Privacy

Generator warna & CSS berjalan sepenuhnya di browser Anda. Pratinjau dan konversi tidak pernah mengunggah gaya Anda.

Common use cases

  • Gunakan CSS Grid Generator kapan pun Anda membutuhkannya: Tentukan kolom, baris, dan celah secara visual, lalu salin kode template CSS Grid.

Troubleshooting

Pratinjau terlihat berbeda setelah ditempel

Periksa CSS yang bersaing di halaman Anda (reset, warna yang diwarisi). Salin aturan yang dihasilkan ke dalam stylesheet terisolasi terlebih dahulu.

FAQ

Apakah ini mengunggah CSS saya?

Tidak. Generator dan konverter dijalankan di browser Anda dengan pratinjau langsung.

Apakah saya memerlukan akun?

Tidak. Buka alatnya, atur kontrolnya, dan salin CSSnya.

Alat terkait

Flexbox Generator

Experiment with flex direction, wrap, justify, and align — see layouts update live.

Open tool

Border Radius Generator

Control each corner independently and preview rounded shapes with copy-ready CSS.

Open tool

Box Shadow Generator

Design layered box-shadows with offset, blur, spread, and color — live preview included.

Open tool