Penjana CSS Grid | Alat pembangun dalam talian

Lajur

1–12

Baris

1–12

grid-template-columns

cth. 1fr 1fr 1fr, 200px 1fr, repeat(3,1fr)

grid-template-rows

cth. auto, 100px auto, repeat(3,80px)

Jurang

Jangkauan Sel (pilih sel)

col-span

row-span

Sel yang menjangkau ditunjukkan dalam warna hijau.

Klik sel untuk memilihnya, kemudian tetapkan jangkauan lajur/baris di bawah.

CSS yang Dijana

Apakah CSS Grid?

CSS Grid Layout ialah sistem susun atur dua dimensi yang terbina dalam pelayar moden. Anda mentakrifkan bekas grid dengan display: grid, kemudian mengawal lajur dengan grid-template-columns dan baris dengan grid-template-rows. Unit pecahan (fr) mengagihkan ruang yang ada secara berkadar. Item anak boleh merentangi berbilang lajur atau baris menggunakan grid-column: span N dan grid-row: span N.

Cara Menggunakan Penjana CSS Grid

Tetapkan bilangan lajur dan baris menggunakan input nombor (1–12 setiap satu).
Laraskan grid-template-columns dan grid-template-rows untuk mengawal saiz (cth. 1fr 2fr, 200px auto).
Tetapkan jurang antara sel (cth. 10px, 1rem).
Klik mana-mana sel dalam pratonton untuk memilihnya (bertukar kepada oren).
Tetapkan col-span dan row-span dalam panel Jangkauan Sel, kemudian klik Guna. Sel yang menjangkau bertukar hijau.
Klik tab CSS atau HTML untuk menukar format output, kemudian Salin ke papan klip.
Klik Set Semula Semua untuk bermula semula dengan grid 3×3 yang baharu.