Taman Permainan Grid CSS

Semua alat

Susun templat Grid CSS, jurang dan penempatan secara visual, kemudian salin CSS susun atur.

Pratonton

Klik item bernombor dalam grid untuk memilih dan menempatkannya semula.

grid-template-columns —
grid-template-rows —
CSS yang dijana
—
—
Lajur
Baris
Jurang
16px
16px
Penjajaran
Item grid
Item 1
Pratetap

Mengenai Taman Permainan Grid CSS

CSS Grid Playground membina susun atur grid sebenar secara visual. Tambah dan buang trek lajur serta baris untuk membentuk grid-template-columns dan grid-template-rows, tetapkan jurang lajur dan baris, dan sesuaikan keempat-empat sifat penjajaran — justify-items, align-items, justify-content dan align-content — sementara pratonton mencerminkan setiap perubahan serta-merta.

Penempatan item adalah tempat grid menjadi berkuasa: tambah item, klik satu dalam pratonton untuk memilihnya, dan letakkan dengan column start, column span, row start dan row span. Itulah cara bar sisi, pengepala dan sel ciri merentangi pelbagai trek — teknik di sebalik hampir setiap susun atur grid dunia sebenar.

Tiga pratetap — holy grail, dashboard dan gallery — memuatkan struktur halaman klasik yang boleh anda bedah dan sesuaikan. Apabila susun atur sudah betul, salin CSS yang dijana, mengandungi peraturan lengkap bekas grid serta penempatan setiap item.

Cara menggunakan Taman Permainan Grid CSS

  1. Tambah atau buang trek lajur dan baris untuk mentakrifkan templat grid.
  2. Tetapkan jurang lajur dan jurang baris.
  3. Laraskan kawalan penjajaran: justify-items, align-items, justify-content dan align-content.
  4. Tambah item, klik satu dalam pratonton, dan tetapkan permulaan/rentang lajur-baris untuk meletakkannya.
  5. Muatkan pratetap holy grail, dashboard atau gallery untuk mengkaji susun atur klasik.
  6. Salin CSS yang dijana ke dalam helaian gaya anda.

Soalan lazim

justify-items menjajarkan setiap item di dalam selnya sendiri; justify-content menjajarkan keseluruhan grid di dalam bekas apabila trek tidak memenuhinya. Perbezaan yang sama berlaku secara menegak dengan align-items berbanding align-content.

Pilih item dan tingkatkan rentang lajurnya — output CSS menggunakan grid-column dengan nilai span. Digabungkan dengan rentang baris, anda boleh membina bar pengepala, bar sisi dan sel ciri besar dalam grid yang sama.

Rangka halaman klasik: pengepala dan pengaki lebar penuh dengan tiga lajur di antaranya — navigasi, kandungan utama dan aside. Ia terkenal rumit dengan float; pratetap ini menunjukkan bagaimana beberapa penempatan grid menyelesaikannya dengan kemas.

Grid cemerlang untuk susun atur dua dimensi di mana baris dan lajur perlu dijajarkan — rangka halaman, papan pemuka, galeri. Flexbox terbaik untuk aliran satu dimensi seperti bar alat dan menu. Kedua-duanya boleh digabungkan: grid untuk halaman, flex di dalam komponen.

Ya, ia percuma dan berasaskan pelayar — bereksperimenlah selama yang anda mahu, dan tiada apa yang anda bina meninggalkan komputer anda.
Kongsi ini
Alat Berkaitan
Pembina Tandatangan E-mel Reka bentuk tandatangan e-mel HTML yang profesional daripada 30 templat, sesuaikan dan simpan. Percuma
Ikon ke PNG Tukar Bootstrap Icons, Font Awesome dan lain-lain kepada imej PNG tersuai — percuma, dalam pelayar anda. Percuma
Penjana Ikon Aplikasi Jana set ikon aplikasi yang lengkap dan sedia untuk kedai bagi App Store dan Google Play — latar belakang gradien, mesh dan corak premium, dijana daripada logo anda. Percuma
Penjana Favicon Bina pakej favicon lengkap daripada logo, ikon fon atau monogram — favicon.ico, PNG moden, ikon Apple touch, ikon PWA, manifes web dan petikan HTML. Percuma
Penjana Bayang Kotak CSS Cipta bayang-kotak CSS berlapis dengan gelangsar langsung untuk ofset, blur, sebaran, warna, kelegapan dan inset — pratonton pada elemen sebenar dan salin CSS yang sedia tampal serta-merta. Percuma
Penjana Jejari Sempadan CSS Cipta border-radius CSS secara visual dengan pratonton langsung dan salin kod sedia pengeluaran. Percuma
Carian popular
penjana grid css taman permainan grid css penjana grid-template-columns penjana susun atur grid css pembina grid-template-areas alat jurang grid css pemvisual grid css
Perlukan bantuan?
Menemui masalah dengan alat ini? Beritahu pasukan kami.
Laporkan masalah

Tambah alat percuma ini ke laman web anda sendiri — salin dan tampal kod di bawah.