Generator CSS Grid

Cara kerja

Tab grid menyusun daftar track dari jumlah dan ukuran Anda: tiga kolom 1fr menjadi grid-template-columns: repeat(3, 1fr), shorthand yang meluas menjadi satu pecahan ruang kosong per kolom. auto mengukur track menurut isinya, dan nilai px tetap mencetak persis lebar itu — resep umum adalah satu track sidebar tetap ditambah satu track 1fr cair. Jika Anda ingin track yang melar dengan batas, sunting keluarannya secara manual menjadi minmax(80px, 1fr); pembuat ini sengaja tidak memasukkannya ke shorthand agar CSS yang dihasilkan tetap terbaca.

Unit fr

Satu fr adalah satu bagian dari ruang yang tersisa setelah track berukuran tetap, gap, dan padding dikurangkan — ruang kosong, bukan persentase. Bedanya penting: dengan sidebar 200px, gap 16px, dan dua kolom 1fr, tiap fr mendapat (lebar − 216px) ÷ 2. Dua track 2fr 1fr membagi sisa yang sama 2:1, dan fr tidak pernah menyebabkan peluberan seperti persentase ketika Anda lupa menghitung gap.

Aturan penamaan grid-template-areas

Setiap string berkutip adalah satu baris; tiap token adalah satu sel, dan jumlah token harus sama di semua baris. Area bernama harus membentuk persegi panjang sempurna — wilayah berbentuk L tidak valid dan, terus terang, browser membuang seluruh deklarasi grid-template-areas begitu ada nama yang melanggar aturan, jadi baris peringatan di atas bukan hiasan. Sel kosong memakai titik. Setelah dilukis, tiap item dapat mengambil area dengan nama alih-alih menghitung garis start/end.

Track implisit vs eksplisit

Anda mendeklarasikan grid eksplisit — track pada grid-template-columns dan -rows. Konten di luarnya (lebih banyak item daripada sel, atau grid area plus item tanpa penugasan) membentuk track implisit di luar templat, yang diukur grid-auto-columns/-rows dengan default auto. Karena itu demo yang tampak punya baris misteri tambahan biasanya cuma meluber dari grid eksplisit.

Pertanyaan yang sering diajukan