Pembuat CSS Grid

Bangun tata letak CSS Grid secara visual dan salin CSS serta HTML yang rapi

Tata letak

Elemen mengisi grid sesuai urutan sumber.

Ukuran kolom

Kolom 1
Kolom 2
Kolom 3

Ukuran baris

Baris 1
Baris 2

Pratinjau

Keluaran

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 16px;
}

Opsi

16px
16px

Elemen terpilih

Pilih elemen di pratinjau untuk mengatur bentang kolom dan barisnya.

Lanjutan

0 membiarkan min-height tidak diatur. Baris berukuran fr butuh tinggi untuk diisi.

Pratinjau dan kode diperbarui saat Anda mengedit.

Alat Terkait

Generator CSS FlexboxSusun layout Flexbox secara visual lalu salin CSS, HTML, atau TailwindGenerator GradienJelajahi gradien CSS pilihan atau buat gradien linear, radial, dan kerucutCSS Perapih & PeminifikasiFormat, optimalkan, dan minify kode CSSPlayground HTML CSS JSTulis kode frontend, jalankan dengan aman, dan debug hasilnya di browser.
Apa itu Pembuat CSS Grid?

Pembuat visual untuk tata letak CSS Grid. Atur ukuran kolom dan baris dengan fr, px, %, auto, minmax(), atau nilai kustom yang divalidasi, warnai area bernama, atau buat grid kartu responsif dengan auto-fit. Pratinjau adalah kontainer CSS Grid sungguhan yang memakai deklarasi yang sama dengan kode yang dihasilkan, jadi yang Anda lihat sama dengan yang Anda salin.

Cara menggunakan
  1. 1.Pilih mode: Trek, Area Bernama, atau Responsif, atau muat preset.
  2. 2.Atur ukuran kolom dan baris, jarak, serta perataan.
  3. 3.Di Trek, klik elemen di pratinjau untuk memberi bentang kolom atau baris.
  4. 4.Di Area Bernama, ketik nama lalu klik sel untuk mewarnai setiap area.
  5. 5.Salin atau unduh CSS atau halaman HTML mandiri.
Area bernama dan validasi

Setiap area bernama harus membentuk satu persegi panjang penuh; jika tidak, browser mengabaikan seluruh deklarasi grid-template-areas. Alat ini menjelaskan area mana yang melanggar aturan dan mempertahankan tata letak valid terakhir di pratinjau dan kode sampai Anda memperbaikinya. Ukuran trek kustom diperiksa sebelum diterapkan.

Batasan

Hingga 12 kolom, 12 baris, dan 48 elemen. Ukuran kustom menerima panjang, persentase, fr, auto, min-content, max-content, minmax(), dan fit-content(); calc(), var(), nama garis, dan repeat() di dalam satu trek tidak diterima. Tata letak hanya disimpan di browser ini.

CodingTool resmi diluncurkan di

Launched on StartupBaseCodingTool.dev - Free, Fast & Easy Developer Tools in One Place | Product HuntCodingTool - Featured on Startup FameFazier badgeListed on Turbo0Featured on Twelve ToolsFeatured on Findly.toolsLaunchpadly Startup DirectoryCodingTool.dev — Featured on Smol Launch