Generator CSS Grid

CSS Grid untuk tata letak 2D (baris + kolom), sementara Flexbox untuk tata letak 1D (baris atau kolom). Grid lebih cocok untuk tata letak halaman yang kompleks.

fr (fraction) adalah satuan proporsional yang digunakan dalam CSS Grid. Misalnya, 1fr 2fr membagi ruang dengan rasio 1:2. Sangat berguna untuk tata letak responsif.

Bisa. Menulis repeat(auto-fit, minmax(240px, 1fr)) berarti Anda hanya menetapkan lebar minimum kolom dan membiarkan peramban menghitung sisanya: kolom bertambah saat viewport melebar dan berkurang saat menyempit, mencakup dari ponsel hingga desktop tanpa satu pun breakpoint. Perhatikan bahwa auto-fill menyisakan trek kosong di ruang sisa, sedangkan auto-fit merentangkan kolom yang ada untuk mengisinya, sehingga keduanya berbeda ketika itemnya sedikit.

Item kisi secara bawaan punya ukuran minimum auto, artinya mereka menolak menyusut di bawah isinya — satu URL panjang atau kata yang tak bisa dipenggal akan membuka lebar seluruh kolom. Menyetel min-width: 0 pada item itu memungkinkan kisi mengecilkannya lagi, dan menambahkan overflow-wrap: anywhere membuat untai panjangnya berpindah baris. Mendefinisikan treknya sebagai minmax(0, 1fr) alih-alih 1fr saja menghapus penyebabnya sama sekali, dan itulah sebabnya cara ini begitu lazim.