LocalToolsKumpulan alat browser offline

Kategori: Alat pengembang

Generator Grid CSS

Ide kami sendiriAlatnya tidak ada?

Bangun tata letak grid-template dan salin CSS-nya

Atur jumlah kolom dan baris serta celah pada pratinjau grid langsung, secara opsional mengubah kolom menjadi trek minmax() agar bisa menyusut sebelum membungkus, lalu salin deklarasi kontainer yang sudah jadi. Tidak ada apa pun di sini yang meninggalkan browser Anda.

Keluaran
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}

Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.

Apa fungsi alat ini

grid-template-columns: repeat(n, 1fr) memberi kolom yang sama besar tetapi tidak pernah menyusut di bawah kontennya, sehingga meluap di layar sempit. Menggantinya dengan minmax(min, 1fr) memungkinkan setiap kolom menyusut hingga batas tertentu sebelum grid akhirnya membungkus — perbedaan antara tata letak yang tetap terbaca di ponsel dan yang tidak. Alat ini membangun kedua bentuk itu dari kontrol yang sama sehingga perbedaannya terlihat pada grid nyata, bukan hanya pada deklarasinya.

Cara memakainya

  1. Atur jumlah kolom dan baris.
  2. Atur celah antar sel.
  3. Aktifkan kolom minmax() jika Anda ingin kolom menyusut di layar sempit, lalu salin CSS-nya.

Privasi

Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.

Pertanyaan yang sering diajukan

Apakah pratinjaunya grid CSS sungguhan?
Ya. Sel bernomor itu ditata dengan grid-template-columns dan grid-template-rows persis yang sedang Anda atur.
Apa sebenarnya yang diubah oleh minmax()?
Tanpa itu, kolom repeat(n, 1fr) tetap sama besar tetapi tidak pernah menyusut melewati kontennya, sehingga kontainer sempit hanya akan meluap. minmax(min, 1fr) memungkinkan setiap kolom menyusut hingga batas minimum sebelum browser mencari cara lain agar muat.
Apakah ada yang diunggah?
Tidak. Deklarasinya adalah teks yang dibangun dari kontrol yang Anda atur, dan grid pratinjaunya dirender secara lokal di halaman.

Kembali ke semua alat