Penjana CSS Grid

Tetapkan lajur dan baris anda, seret merentasi sel untuk meletakkan item, dan salin CSS grid dengan HTML yang sepadan dalam satu klik.

Pratetap
Item
CSS
HTML
Seret merentasi grid untuk meletakkan item.

Grid anda dibina terus dalam penyemak imbas anda. Tiada apa-apa yang anda tetapkan di sini akan dimuat naik ke BroBroGo.

Soalan Lazim

Bagaimanakah cara saya meletakkan item pada grid?

Tekan dan seret merentasi sel untuk menandakan segi empat tepat — apabila anda melepaskannya, ia menjadi elemen anak yang diletakkan merentasi lajur dan baris tersebut. Setiap item yang anda lukis mendapat peraturan grid-column dan grid-row sendiri dalam CSS dan div yang sepadan dalam HTML. Item boleh bertindih, dan item yang dilukis kemudian akan berada di atas; gunakan × pada item untuk membuangnya.

Bolehkah lajur dan baris mempunyai saiz yang berbeza?

Ya. Setiap runut mempunyai kotak saiznya sendiri, dan anda boleh menaip sebarang nilai grid di sana — 1fr, 200px, auto, min-content atau minmax(120px, 1fr). Runut yang berkongsi saiz yang sama akan dilipat ke dalam repeat() supaya output kekal pendek. Jurang lajur dan jurang baris ditetapkan secara berasingan, dan mengecil menjadi satu jurang apabila nilainya sepadan.

Apakah yang perlu saya lakukan dengan kod yang dijana?

Salin CSS dan HTML secara bersebelahan. HTML memberikan anda bekas dengan satu div bagi setiap item, dan CSS mentakrifkan grid serta meletakkan setiap item. Tampal kedua-duanya ke dalam projek anda dan anda akan mendapat reka letak yang sama seperti yang anda lukis di sini.

Ditulis dan disemak oleh pasukan editorial BroBroGo.Terakhir dikemas kini:

Pengenalan kepada Reka Letak CSS Grid

CSS Grid ialah sistem reka letak dua dimensi yang berkuasa untuk web, membolehkan kawalan penuh ke atas susunan lajur dan baris secara serentak. Alat Penjana CSS Grid direka untuk membantu anda membina reka letak ini secara visual. Anda boleh menetapkan bilangan lajur dan baris, menentukan saiz setiap runut, menetapkan jurang, dan meletakkan item dengan menyeret tetikus merentasi sel grid. Alat ini secara automatik menjana kod CSS dan HTML yang sepadan untuk disalin terus ke dalam projek anda.

Pembinaan grid ini berlaku sepenuhnya di dalam penyemak imbas anda. Tiada sebarang data atau tetapan yang anda masukkan akan dimuat naik ke BroBroGo, sekali gus memastikan proses kerja anda kekal peribadi.

Parameter Input dan Kawalan Grid

Untuk membina grid, anda boleh mengawal beberapa parameter input utama melalui antara muka alat:

  • Lajur: Nilai angka antara 1 dan 12.
  • Baris: Nilai angka antara 1 dan 12.
  • Jurang lajur: Nilai saiz antara 0 hingga 48px.
  • Jurang baris: Nilai saiz antara 0 hingga 48px.
  • Saiz lajur: Sebarang nilai grid CSS yang sah, seperti 1fr, 200px, auto, min-content, atau minmax(120px, 1fr).
  • Saiz baris: Sebarang nilai grid CSS yang sah, seperti 1fr, 200px, auto, min-content, atau minmax(120px, 1fr).
  • Peletakan item: Ditentukan dengan menyeret tetikus merentasi sel untuk membentuk kawasan segi empat tepat.

Setiap runut (lajur atau baris) mempunyai kotak saiz tersendiri untuk anda memasukkan nilai grid. Jika anda memasukkan nilai yang tidak sah seperti not-a-grid-track, medan input tersebut akan ditandakan sebagai tidak sah, namun output CSS akan tetap mengekalkan nilai sah terakhir yang dikesan.

Memahami Unit fr dan Fungsi repeat()

Unit pecahan (fr) mewakili sebahagian daripada ruang fleksibel yang tersedia dalam bekas grid. Sebagai contoh, jika grid mempunyai tiga lajur dengan saiz 1fr 1fr 1fr, ruang akan dibahagikan secara sama rata kepada tiga bahagian.

Apabila anda mempunyai beberapa runut yang berkongsi saiz yang sama, alat ini akan memudahkan kod output dengan melipat nilai tersebut ke dalam fungsi repeat(). Sebagai contoh, jika anda menetapkan tiga lajur bersaiz 1fr, kod CSS yang dijana akan ditulis sebagai repeat(3, 1fr) untuk memastikan kod kekal ringkas dan bersih.

Menguruskan Jurang Grid

Jurang antara lajur dan baris dikawal secara berasingan melalui input Jurang lajur dan Jurang baris. Walau bagaimanapun, CSS mempunyai peraturan pengoptimuman tersendiri. Apabila nilai kedua-dua jurang ini adalah sama, alat ini akan menggabungkan kedua-dua pengisytiharan tersebut menjadi satu sifat gap sahaja di dalam kod CSS yang dijana. Jika nilai kedua-duanya berbeza, ia akan ditulis secara berasingan sebagai column-gap dan row-gap.

Peletakan Item dan Tindanan

Anda boleh meletakkan elemen anak pada grid dengan menekan dan menyeret tetikus merentasi sel-sel grid. Apabila anda melepaskan tetikus, satu item anak akan tercipta yang merentasi lajur dan baris yang dipilih.

Peraturan peletakan item adalah seperti berikut:

  • Setiap item yang dilukis akan mendapat peraturan grid-column dan grid-row tersendiri dalam CSS, serta tag div yang sepadan dalam HTML.
  • Alat ini menyokong maksimum sehingga 16 item sahaja.
  • Item dibenarkan untuk bertindih antara satu sama lain. Item yang dilukis kemudian akan berada di atas item yang dilukis lebih awal.
  • Setiap item mempunyai butang "×" yang boleh diklik untuk membuangnya daripada grid.
  • Butang "Kosongkan item" akan memadamkan semua item, menghasilkan bekas HTML yang kosong dengan kiraan 0 item.
  • Butang "Tambah item" akan menjana satu item HTML baharu secara manual.

Pratetap Reka Letak Sedia Ada

Untuk mempercepatkan fasa prototaip, alat ini menyediakan beberapa pilihan "Pratetap" reka letak biasa yang boleh digunakan terus:

Nama Pratetap Penerangan Struktur
Bar sisi Reka letak klasik dengan lajur sisi untuk navigasi dan kawasan kandungan utama.
Pengepala & pengaki Struktur tiga bahagian menegak yang mengandungi bahagian atas (pengepala), tengah (kandungan), dan bawah (pengaki).
Galeri Reka letak grid yang menjana 3 lajur, 2 baris, dan 3 item secara automatik.
Papan pemuka Susunan grid kompleks yang sesuai untuk memaparkan pelbagai widget maklumat secara serentak.

Kebolehcapaian dan Reka Bentuk Responsif

Apabila menggunakan CSS Grid untuk reka bentuk responsif, penggunaan unit fleksibel seperti fr dan fungsi minmax() membolehkan grid menyesuaikan saiz mengikut lebar skrin peranti tanpa memerlukan banyak pertanyaan media (media queries).

Dari sudut kebolehcapaian (accessibility), susunan kod HTML yang dijana mestilah logik. Walaupun CSS Grid membolehkan anda menyusun semula kedudukan visual item menggunakan grid-column dan grid-row tanpa mengira kedudukan asalnya dalam HTML, pembaca skrin (screen readers) tetap akan membaca kod mengikut urutan HTML. Oleh itu, pastikan struktur HTML yang disalin daripada alat ini disusun mengikut aliran pembacaan yang betul untuk pengguna kurang upaya.

Soalan Lazim (FAQ)

Bagaimanakah cara saya meletakkan item pada grid? Tekan dan seret merentasi sel untuk menandakan segi empat tepat — apabila anda melepaskannya, ia menjadi elemen anak yang diletakkan merentasi lajur dan baris tersebut. Setiap item yang anda lukis mendapat peraturan grid-column dan grid-row sendiri dalam CSS dan div yang sepadan dalam HTML. Item boleh bertindih, dan item yang dilukis kemudian akan berada di atas; gunakan × pada item untuk membuangnya.

Bolehkah lajur dan baris mempunyai saiz yang berbeza? Ya. Setiap runut mempunyai kotak saiznya sendiri, dan anda boleh menaip sebarang nilai grid di sana — 1fr, 200px, auto, min-content atau minmax(120px, 1fr). Runut yang berkongsi saiz yang sama akan dilipat ke dalam repeat() supaya output kekal pendek. Jurang lajur dan jurang baris ditetapkan secara berasingan, dan mengecil menjadi satu jurang apabila nilainya sepadan.

Apakah yang perlu saya lakukan dengan kod yang dijana? Salin CSS dan HTML secara bersebelahan. HTML memberikan anda bekas dengan satu div bagi setiap item, dan CSS mentakrifkan grid serta meletakkan setiap item. Tampal kedua-duanya ke dalam projek anda dan anda akan mendapat reka letak yang sama seperti yang anda lukis di sini.

Adakah data reka letak saya dihantar ke pelayan luar? Tidak. Grid anda dibina terus dalam penyemak imbas anda. Tiada apa-apa yang anda tetapkan di sini akan dimuat naik ke BroBroGo, sekali gus memastikan privasi data anda terpelihara.

Penjana CSS Cubic BezierSeret dua pemegang untuk membentuk keluk pelonggaran, lihat titik bergerak melaluinya berbanding keluk yang stabil, dan salin nilai cubic-bezier().Penjana FlexboxSediakan bekas flex dan itemnya dengan kawalan visual, lihat reka letak bertindak balas secara langsung, dan salin CSS dalam satu klik.Penjana Box ShadowSeret gelongsor untuk membentuk box-shadow, susun lapisan untuk kedalaman, dan salin CSS yang telah siap serta-merta.Penjana KecerunanBina kecerunan linear, jejarian atau konik, tambah hentian warna dan tetapkan arah, kemudian salin CSS dalam satu klik.Penjana Border RadiusBulatkan setiap bucu dengan gelongsor, bentuk gumpalan organik dengan mod elips, dan salin CSS serta-merta.Kalkulator CSS clamp()Masukkan saiz untuk skrin kecil dan besar dan dapatkan nilai clamp() bendalir yang diskalakan dengan lancar di antaranya — untuk saiz fon, padding, margin atau gap.