Generator CSS grid: kolom, baris dan area bernama

Cara memakai

Ketik Kolom (ukuran trek) dan Baris (ukuran trek). Untuk dua kolom, 200px 1fr memberi sidebar tetap dan area utama yang fleksibel.
Atur Jarak kolom (px) dan Jarak baris (px), dan beri wadah sebuah Nama kelas.
Ketik nama di bawah Nama area yang digambar, biarkan Gambar terpilih, lalu klik sel-sel yang menjadi milik area itu. Pilih Hapus untuk mengosongkan sel.
Salin kotak CSS, atau periksa Pratinjau, sebelum menempelkan aturannya ke lembar gaya Anda.

Ukuran trek dan repeat()

Setiap trek adalah ukuran dalam grid: panjang dalam px atau persentase, ukuran fleksibel dalam fr yang membagi ruang sisa sebanding dengan jumlahnya, auto, min-content atau max-content. minmax(minimum, maksimum) memberi trek sebuah rentang. Spesifikasi CSS Grid Layout menjelaskan cara setiap ukuran dihitung.

repeat(3, 1fr) menulis trek yang sama tiga kali. repeat(auto-fill, minmax(200px, 1fr)) membuat sebanyak trek yang muat dalam lebar kotak. Karena jumlah itu bergantung pada kotak, setiap trek dalam pengulangan auto-fill atau auto-fit memerlukan ukuran tetap, dan alat ini tidak dapat menggambar area bernama di atasnya.

grid-template-columns: 200px 1fr;  grid-template-rows: auto 1fr auto;  gap: row-gap column-gap;

Area bernama

Properti grid-template-areas menerima satu string untuk setiap baris grid. Nama dalam sebuah string adalah sel-sel pada baris itu, dan titik berarti sel yang tidak berada dalam area mana pun. Setiap nama harus mengisi satu persegi panjang, karena peramban tidak dapat menempatkan nama dalam bentuk L atau di dua blok terpisah.

Nama ditempatkan pada grid oleh wadah, dan setiap anak mengambil tempatnya dengan grid-area. Alat menulis satu aturan untuk setiap nama, sehingga elemen dengan kelas itu mengisi sel-selnya.

Gunakan satu baris nama untuk setiap baris trek, dengan jumlah nama yang sama di setiap baris.
Pilih nama yang menggambarkan bagian halaman, seperti header, sidebar atau main, karena aturannya ditulis dengan nama itu sebagai kelas.

Contoh: halaman dengan header, sidebar, konten dan footer

Tata letak awal memiliki dua kolom, 200px dan 1fr yang fleksibel, serta tiga baris: auto untuk header, 1fr untuk bagian tengah dan auto untuk footer. Jaraknya 16 px di kedua arah. Header digambar melintasi kedua kolom, sidebar dan konten utama berbagi baris tengah, dan footer digambar melintasi kedua kolom di bagian bawah.

CSS-nya dimulai dengan .layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; gap: 16px; } lalu grid-template-areas dengan tiga baris: "header header", "sidebar main" dan "footer footer". Setiap nama memiliki aturannya sendiri dengan grid-area, sehingga elemen header mengisi baris pertama.

Pertanyaan yang sering diajukan

Apa beda fr dan auto?

Trek fr membagi ruang yang tersisa setelah trek tetap, sebanding dengan jumlahnya, sehingga 1fr 2fr memberi trek kedua dua kali lebar trek pertama. Trek auto selebar kebutuhan isinya lalu berbagi ruang lebih jika ada.

Mengapa saya tidak bisa menggambar area di atas trek auto-fill?

auto-fill dan auto-fit menentukan jumlah trek dari lebar kotak, sehingga jumlah sel belum diketahui saat Anda menyunting. Area bernama memerlukan jumlah yang tetap, jadi alat meminta Anda menghapus auto-fill atau auto-fit ketika area digambar.

Mengapa setiap area mendapat aturannya sendiri?

grid-template-areas menempatkan nama pada grid, tetapi setiap item tetap harus menyatakan sel mana yang diisinya, dan grid-area melakukan itu. Alat menulis satu aturan untuk setiap nama, dengan kelas yang bernama sama.

Apa yang terjadi pada sel yang tidak saya gambar?

Sel yang tidak berada di area mana pun ditulis sebagai titik di grid-template-areas. Tidak ada yang ditempatkan di sel itu oleh area bernama, jadi sel itu tetap kosong kecuali Anda menempatkan item di sana dengan cara lain.

Peramban mana yang mendukung CSS grid?

CSS grid didukung di semua peramban utama masa kini. Jika pengunjung Anda memakai versi lama, periksa tata letak di versi itu sebelum mengandalkan area bernama.

Apakah tata letak saya dikirim atau disimpan di suatu tempat?

Tidak. Grid, pratinjau dan CSS dibuat di peramban Anda. Tidak ada yang disimpan atau dikirim ke server kami, jadi salin CSS sebelum meninggalkan halaman.

Sumber

Angka dan teks terakhir diperiksa pada Selasa, 10 November 2026.