Generator CSS Grid

Generator CSS Grid: seret sel untuk menggambar area

Kotak di panggung generator CSS Grid ini adalah kontainer display: grid yang sebenarnya. Penggaris di atas dan di kiri menampilkan nilai yang ditulis untuk setiap track kolom dan baris, ukuran px hasil hitungan browser, serta nomor garisnya. Jika Anda menyeret sel kosong, terbentuk area yang menempati rentang itu. Area dapat dipindahkan per sel dengan menyeretnya, dan dapat diperbesar atau diperkecil dengan menyeret sudut kanan bawah area yang dipilih. Klik chip pada penggaris untuk mengubah ukuran track tersebut menjadi, misalnya, 1fr, 200px, atau minmax(120px, 1fr).

Kalimat di bawah panggung menjabarkan berapa px nilai 1fr saat ini sesuai urutan perhitungannya. Jika kolom dibuat otomatis mengikuti lebar, jumlah kolom yang muat juga ditampilkan dalam bentuk rumus. Tata letak yang sudah jadi dapat disalin sebagai CSS dengan nama area (grid-template-areas) atau dengan nomor garis, dan HTML-nya dapat dibawa sekaligus. Tombol salin tautan menyimpan tata letak saat ini di dalam alamat.

Kapan Grid cocok dipakai: saat baris dan kolom harus selaras

CSS Grid adalah tata letak dua dimensi: batas kolom dan baris ditentukan lebih dahulu, lalu item ditempatkan pada selnya. Ukuran sel ditentukan oleh track, bukan oleh isi item, sehingga batas sel di atas dan di bawah tetap sejajar meskipun melintasi banyak baris. Grid sangat berguna pada tampilan berikut.

• Kerangka halaman: untuk membagi bagian yang posisinya tetap, seperti header, sidebar, konten, dan footer. Jika ditulis dengan nama area, tata letak sudah terbaca hanya dari CSS-nya (contoh 'Halaman dasar' dan 'Holy Grail').
• Dasbor: untuk menempatkan beberapa sel indikator kecil bersama grafik besar yang menempati dua sel atau lebih dalam satu grid (contoh 'Dasbor').
• Daftar kartu: lebar kartu tetap sama pada setiap baris walaupun jumlah kolom berubah mengikuti lebar layar. Jika dibungkus dengan Flexbox, kartu di baris terakhir cenderung melebar; kartu pada Grid mengikuti lebar track sehingga hal itu tidak terjadi (contoh 'Kartu auto-fit').
• Kumpulan foto berukuran berbeda: foto yang menempati dua atau empat sel dicampur, lalu celah kosong diisi dengan dense (contoh 'Mosaik foto').
• Penumpukan: jika dua area diberi sel yang sama, tata letak dengan teks di atas gambar dapat dibuat tanpa menghitung posisi. Seret satu area ke atas area lain di panggung untuk melihat kondisi bertumpuk.

Untuk tata letak yang hanya memajang item dalam satu arah dan membagi ruang di dalam satu baris, seperti menu atau kumpulan tombol, Flexbox lebih sederhana.

Cara memakai

1. Pilih contoh. Klik salah satu dari 9 ubin di bagian atas, maka track, jarak, dan area berubah sekaligus. Area yang berubah bergeser mulus dari posisi lama ke posisi baru.
2. Tentukan track. Tambah atau kurangi track dengan tombol kolom dan baris di baris atas, lalu klik chip pada penggaris untuk mengubah ukurannya. Di panel kendali sebelah kanan, nilai dapat diketik langsung atau dipilih dari nilai yang sering dipakai, dan track baru dapat disisipkan sebelum atau sesudah track terpilih.
3. Gambar area. Seret sel kosong untuk membuat area, seret area untuk memindahkannya, dan seret sudut kanan bawah untuk mengubah ukurannya. Dengan keyboard, fokuskan area lalu gunakan tombol panah untuk memindahkannya satu sel, Shift dengan tombol panah untuk memperbesar atau memperkecil, dan tombol Delete untuk menghapus. Nama area diubah di panel kendali.
4. Periksa lebar. Ubah lebar kontainer dengan tombol Penuh, 768, 480, dan 360 di baris atas atau dengan pegangan di kanan bawah panggung. Anda langsung melihat bagaimana track fr menyusut dan berapa kolom otomatis yang terbentuk.
5. Salin. Pilih cara penulisan, nama area atau nomor garis, lalu tekan 'Salin CSS' atau 'Salin HTML + CSS'. Jika 'Sertakan hiasan pratinjau' diaktifkan, garis tepi dan warna latar ikut disertakan sehingga sel tetap terlihat saat ditempel ke berkas kosong.

Cara membaca nilai track

Pada grid-template-columns dan grid-template-rows, satu ukuran ditulis untuk setiap track. Jika nilai yang sama berulang, penulisannya dapat diringkas menjadi repeat(3, 1fr), dan alat ini juga menulisnya demikian ketika semua track sama.

Berapa px nilai 1fr: urutan pembagian ruang sisa

fr bukan panjang tetap, melainkan kelipatan untuk membagi ruang sisa. Browser menentukan ukuran 1fr dengan urutan berikut.

1. Dari lebar dalam, kurangi jarak (jumlah track − 1 kali) dan ukuran track non-fr. Hasilnya adalah ruang sisa.
2. Bagi ruang sisa dengan jumlah kelipatan fr, maka diperoleh ukuran 1fr. Jika jumlah kelipatan kurang dari 1, pembaginya adalah 1 sehingga sebagian ruang sisa dibiarkan kosong.
3. Di antara track fr, track yang ukuran minimumnya lebih besar daripada jatahnya dikunci pada ukuran minimum itu, lalu track fr lainnya membagi ulang sisanya. Ukuran minimum 1fr adalah auto, sehingga kata panjang atau lebar gambar di dalam sel menjadi ukuran minimumnya.

Tabel berikut berisi lebar kolom hasil hitungan Chromium 151 pada kontainer dengan lebar dalam 800px dan jarak kolom 16px (khusus baris terakhir, lebar dalam 600px dan jarak 0). Jika nilai yang sama dimasukkan di panggung, rumus yang sama muncul pada kalimat di bawahnya.

Pada baris terakhir, semula ruang dibagi 600 ÷ 3 = 200px. Namun ukuran minimum kolom pertama, 240px, lebih besar daripada jatah 200px, sehingga kolom pertama dikunci pada 240px. Sisa 360px dibagi dua kolom lainnya, masing-masing 180px. Kolom 2fr hanya bisa tepat dua kali lebar kolom 1fr jika jatah kedua kolom itu lebih besar daripada ukuran minimumnya.

Nama area dan nomor garis

Grid dengan n kolom memiliki garis vertikal bernomor 1 sampai n + 1. Angka kecil di atas penggaris panggung adalah nomor garis tersebut. grid-column: 1 / 3 berarti dari garis 1 sampai garis 3, yaitu menempati dua kolom, dan grid-row: 2 / 4 menempati dua baris. Garis terakhir dapat ditulis -1, sehingga 1 / -1 berarti seluruh lebar berapa pun jumlah kolomnya.

Pada grid-template-areas, setiap baris ditulis sebagai satu string dalam tanda kutip dan setiap sel diisi nama area. Sel kosong ditulis dengan titik (.). Contoh 'Halaman dasar' dengan cara nama area ditulis sebagai berikut.

.grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-rows: 56px 1fr 48px;
  grid-template-areas:
    "header header"
    "side   main"
    "footer footer";
  gap: 12px;
}
.header { grid-area: header; }
.side { grid-area: side; }

Sel-sel yang diberi nama yang sama harus membentuk satu persegi panjang. Jika berbentuk L atau terpisah, seluruh deklarasi menjadi tidak berlaku. Akibatnya, item yang diberi grid-area: nama tidak menemukan areanya dan semuanya bertumpuk di sel yang sama di luar grid eksplisit. Jumlah sel pada setiap string juga harus sama. Tata letak dengan dua area yang menumpuk pada sel yang sama tidak dapat ditulis dengan nama, sehingga alat ini beralih ke penulisan nomor garis saat ada area bertumpuk dan menjelaskan alasannya di atas kode.

Cara nama area memungkinkan tata letak dibayangkan hanya dari CSS, dan pada media query cukup mengganti string untuk menyusun ulang tata letak per lebar layar. Cara nomor garis menghasilkan tulisan yang lebih pendek ketika selnya banyak, seperti pada grid 12 kolom, atau ketika area perlu ditumpuk.

auto-fit dan auto-fill: jumlah kolom mengikuti lebar

Jika 'Kolom otomatis' dipilih, definisi kolom berbentuk repeat(auto-fill, minmax(min(100%, 160px), 1fr)). Browser membuat kolom sebanyak mungkin tanpa meluap, dan jumlahnya adalah ⌊(lebar dalam + jarak) ÷ (lebar minimum + jarak)⌋. min(100%, 160px) menurunkan lebar minimum hingga selebar induk ketika induk lebih sempit daripada 160px, sehingga satu kolom tidak meluap ke samping.

auto-fit dan auto-fill baru tampak berbeda ketika jumlah area lebih sedikit daripada jumlah kolom. auto-fill mempertahankan kolom kosong, sedangkan auto-fit melipat ukuran kolom kosong menjadi 0 beserta jarak di kedua sisinya, sehingga area yang tersisa melebar. Hasil untuk lebar minimum 160px, jarak 16px, dan 3 area adalah sebagai berikut.

Pada 360px kolomnya hanya 2 sehingga area ketiga turun ke baris berikutnya, dan pada 600px jumlah area sama dengan jumlah kolom sehingga kedua cara menghasilkan hasil yang sama. Pilih auto-fill jika Anda tidak ingin kartu menjadi terlalu lebar saat hanya ada satu atau dua, dan pilih auto-fit jika kartu yang ada harus memenuhi lebar penuh.

Di luar grid yang ditentukan: baris implisit dan dense

Jika jumlah area melebihi baris yang ditetapkan dengan grid-template-rows, browser membuat baris tambahan. Baris ini disebut baris implisit, dan ukurannya ditentukan oleh grid-auto-rows (nilai awalnya auto). Di panggung, chip dan sel track implisit digambar dengan garis putus-putus. Pada daftar kartu, baris sering tidak ditentukan sama sekali dan hanya grid-auto-rows yang diberikan.

Area yang posisinya tidak ditentukan mencari sel yang bisa dimasuki sesuai urutan HTML. Jika area dua sel tidak muat di ujung baris, area itu pindah ke baris berikutnya dan meninggalkan sel kosong di depannya. Dengan grid-auto-flow: dense, area kecil yang datang kemudian mengisi sel kosong di depan. Pada contoh 'Mosaik foto', jika 'Isi celah kosong' dimatikan, baris 1 kolom 4 kosong, dan jika dihidupkan, p5 naik ke posisi itu. Namun dense hanya mengubah urutan tampilan di layar; urutan perpindahan dengan Tab dan urutan pembacaan oleh pembaca layar tetap mengikuti urutan HTML.

Perataan di dalam sel

Secara default, area memenuhi sel dengan nilai stretch. justify-items menentukan posisi horizontal di dalam sel dan align-items menentukan posisi vertikal. Dengan start, center, atau end, area menyusut ke ukuran isinya dan diletakkan pada posisi itu. Mengatur keduanya ke center sama dengan satu baris place-items: center, dan contoh 'Rata tengah' menunjukkan tata letak ini. Untuk meratakan satu area saja, berikan justify-self dan align-self pada area tersebut.

Jika jumlah ukuran track lebih kecil daripada kontainer, seluruh track berada di sisi awal (kiri atas). Itulah keadaan ketika kalimat di bawah panggung menyatakan bahwa sisi kanan kosong; untuk memindahkan seluruh track ke tengah, tambahkan justify-content: center pada kontainer.

Dukungan browser

Berikut versi pertama yang mendukung fitur tersebut menurut data kompatibilitas browser MDN. Kode yang dihasilkan alat ini tidak memakai subgrid.

Kesalahan yang sering terjadi

• Lebar kolom 1fr berbeda-beda. Ini terjadi ketika sebuah sel berisi URL panjang atau gambar besar sehingga ukuran minimumnya melebihi jatah. Ganti dengan minmax(0, 1fr) dan atur pembungkusan teks yang meluap secara terpisah.
• Empat kolom 25% meluap. Track persen tidak memperhitungkan jarak. Dengan jarak 16px, kelebihannya 48px, jadi gunakan repeat(4, 1fr).
• Baris 1fr tidak memanjang. Jika tinggi kontainer auto, tidak ada sisa tinggi untuk dibagi. Tentukan tinggi, misalnya dengan height atau min-height: 100dvh.
• grid-template-areas diabaikan seluruhnya. Penyebabnya adalah jumlah sel berbeda pada string-string tersebut, atau nama yang sama tidak membentuk persegi panjang.
• Kartu meluap ke samping di layar sempit. minmax(240px, 1fr) tetap mempertahankan 240px walaupun induknya lebih sempit. Ganti dengan minmax(min(100%, 240px), 1fr).
• Kolom bertambah satu dan muncul gulir horizontal. Jika span lebih besar daripada jumlah kolom, terbentuk kolom implisit. Hal ini mudah terjadi pada kolom otomatis di lebar sempit, jadi periksa dengan tombol 360px.
• Urutan baca kacau setelah diisi dengan dense. Yang berubah hanya urutan tampilan. Untuk daftar yang urutannya penting, matikan dense atau perbaiki urutan HTML.

Keterbatasan dan catatan

• Panggung hanya menampilkan arah penulisan horizontal dari kiri ke kanan.
• Area di panggung hanya berisi huruf nama, dan diberi min-width: 0 serta overflow: hidden agar teks tidak melebarkan track. Kode dasar hanya memuat properti tata letak tanpa dua baris ini, sehingga nama yang sama pun dapat melebarkan kolom 1fr (minimumnya auto) selebar teksnya. Jika 'Sertakan hiasan pratinjau' dinyalakan, dua baris ini ikut masuk bersama padding, border, dan ukuran huruf panggung, sehingga kode tergambar dengan ukuran yang sama. Jika isi sebenarnya besar, ukuran track auto, min-content, dan fr akan berbeda dari panggung.
• Track yang dapat ditentukan maksimal 12 untuk kolom dan 12 untuk baris, serta 24 area. Garis bernama, nomor garis negatif, subgrid, grid-auto-columns, justify-content dan align-content, justify-self dan align-self per area, serta media query tidak dimasukkan ke dalam kode.
• Nilai pada kolom tinggi adalah tinggi isi tanpa padding. height pada kode juga ditulis dengan arti yang sama (content-box).
• Tombol 768, 480, dan 360 mengubah lebar kontainer. Hal ini berbeda dengan media query yang berpatokan pada lebar layar (viewport).
• Kalimat penjelasan fr menghitung ulang dari ukuran track yang digambar browser. Jika selisihnya lebih dari 0.6px, kalimat itu memberi tahu bahwa rumusnya hanya perkiraan.
• Salin tautan menyertakan sampai nama area di dalam alamat.

Tanggal acuan W3C CSS Grid Layout Module Level 2 (Candidate Recommendation Draft 2025-03-26) dan data kompatibilitas browser MDN diperiksa pada naskah aslinya pada 2026-10-21. Lebar kolom pada tabel adalah nilai yang diukur pada kontainer grid sungguhan di Chromium 151.

Sumber

• 01W3C: CSS Grid Layout Module Level 2Candidate Recommendation Draft 2025-03-26. §6.6 ukuran minimum otomatis item grid, §7.2.1 ukuran track (fr di luar minmax() memiliki minimum auto), §7.2.3.2 jumlah pengulangan auto-fill dan auto-fit serta pelipatan track kosong, §7.3 grid-template-areas (deklarasi tidak berlaku jika bukan persegi panjang), §7.5 grid implisit dan grid-auto-rows, §7.7 dense pada grid-auto-flow, §11.1 jarak (jarak pada track yang dilipat), §12.7.1 mencari ukuran fr (jumlah kelipatan kurang dari 1, penghitungan ulang setelah mengecualikan track berukuran minimum besar)
• 02MDN: grid-template-columnsSintaks nilai track, tabel kompatibilitas browser: Chrome 57, Firefox 52, Safari 10.1; subgrid Chrome 117, Firefox 71, Safari 16
• 03MDN: grid-template-areasSintaks nama area, tabel kompatibilitas browser: Chrome 57, Firefox 52, Safari 10.1
• 04MDN: gapTabel kompatibilitas browser: pada tata letak grid, Chrome 66, Firefox 61, Safari 12
• 05MDN: min()Tabel kompatibilitas browser: Chrome 79, Firefox 75, Safari 11.1

Pertanyaan yang sering diajukan

Alat yang sering dipakai bersama