Cara menggunakan CSS Grid Generator
- Atur jumlah kolom dan baris serta gap-nya, atau mulai dari preset seperti Holy grail.
- Edit ukuran track (di atas grid untuk kolom, di sebelah kiri untuk baris):
1fr,240px,auto,minmax(0, 1fr). - Seret di atas sel untuk membuat area, lalu beri nama seperti
headeratausidebar. - Salin CSS dan kerangka HTML ke dalam proyekmu.
Grid areas secara singkat
grid-template-areas memungkinkan kamu menggambar layout dengan nama: setiap string adalah satu baris, setiap kata adalah satu kolom, dan titik (.) berarti sel kosong. Elemen anak ditempatkan dengan grid-area: name, sehingga CSS-nya mudah dibaca seperti gambar halaman.
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-areas:
"header header"
"sidebar main";
}Ukuran track
| Nilai | Arti |
|---|---|
1fr | satu bagian dari ruang yang tersisa |
minmax(0, 1fr) | mirip 1fr, tetapi konten panjang tidak bisa memperlebar kolom |
auto | seukuran kontennya |
240px, 20rem | ukuran tetap |
repeat(auto-fill, minmax(200px, 1fr)) | sebanyak kolom yang muat, cocok untuk grid kartu |
Area harus berbentuk persegi panjang. Tool ini hanya memungkinkan kamu menggambar persegi panjang, jadi CSS-nya selalu valid. Untuk satu baris atau satu kolom item, flexbox biasanya lebih sederhana. Terkait: Clamp Calculator, CSS Formatter.
Juga dicari sebagai: generator grid layout css, css grid builder, generator grid-template-areas, template css grid, generator grid responsif, grid css online, generator layout css.
Tool yang cocok dipakai bersama CSS Grid Generator
- Generator Flexbox CSS — Lihat langsung apa yang dilakukan setiap properti flexbox: atur arah, wrapping, justify-content, align-items, dan gap, tambah atau hapus item, lalu klik item mana pun untuk mengatur flex-grow, shrink, basis, order, dan align-self.
- Generator Border Radius — Bulatkan sudut kotak mana pun: geser satu slider untuk semua sudut atau atur tiap sudut secara terpisah, beralih ke sudut elips untuk bentuk blob dan daun, lalu salin CSS border-radius terpendek yang valid.
- Generator Box Shadow — Tumpuk beberapa lapis bayangan, atur offset, blur, spread dan opacity langsung di kartu pratinjau, lalu salin CSS box-shadow atau text-shadow.
- Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
Pertanyaan yang sering diajukan
Bagaimana cara membuat layout CSS grid?
Atur kolom dan baris, seret di atas sel untuk mendefinisikan area bernama (header, sidebar, main…), lalu salin CSS grid-template-columns, grid-template-rows, dan grid-template-areas yang dihasilkan beserta HTML-nya.
Apa perbedaan 1fr dan minmax(0, 1fr)?
1fr memiliki minimum sebesar ukuran kontennya, sehingga satu kata panjang atau gambar lebar bisa membuat kolom melebar. minmax(0, 1fr) membuat kolom bisa menyusut di bawah ukuran kontennya, sehingga lebar kolom tetap sama.
Kenapa area grid harus berbentuk persegi panjang?
Spesifikasi CSS Grid hanya mengizinkan area bernama berbentuk persegi panjang. Area berbentuk L membuat seluruh deklarasi grid-template-areas menjadi tidak valid.
Bagaimana cara membuat grid responsif?
Tambahkan media query yang mendefinisikan ulang grid-template-columns dan grid-template-areas untuk layar kecil, misalnya satu kolom dengan "header" "main" "sidebar".
Bisakah saya memasang CSS Grid Generator sebagai aplikasi web dan memakainya offline?
Bisa. CSS Grid Generator adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.