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.

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.