Desain / Tata letak

Generator CSS Grid (Pembuat Visual Grid-Template-Areas)

Atur kolom, baris, dan jarak, lalu seret melintasi sel untuk membuat area bernama seperti header, sidebar, dan main. Salin CSS dengan grid-template-columns, grid-template-rows, dan grid-template-areas yang siap ditempel.

Generator CSS Grid (Pembuat Visual Grid-Template-Areas): Ukuran track ditulis saat Anda mengetiknya, misalnya 200px 1fr 1fr, dan ukuran yang berulang menjadi repeat(). Setiap area menjadi nama dalam grid-template-areas, dengan titik untuk sel kosong, serta aturan yang menempatkan elemen menggunakan grid-area. Area harus berbentuk persegi panjang dan tidak boleh saling tumpang tindih, sesuai aturan CSS; layout disimpan di browser ini. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori
Tools developer
Dijalankan
Di browser Anda
Biaya
Gratis · tanpa daftar
Ketersediaan
Siap digunakan
Generator grid CSSPemrosesan lokal

Berjalan sepenuhnya di browser Anda

Seret melintasi sel untuk membuat area; area dapat mencakup beberapa baris dan kolom. Masukkan ukuran track seperti 1fr, 200px, auto, atau minmax(100px, 1fr).

CSS

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

Beri setiap elemen anak class sesuai areanya. Sel yang ditampilkan sebagai titik akan tetap kosong.

Area bernama

Setiap string dalam grid-template-areas adalah satu baris, dan setiap kata adalah satu sel: "header header" "sidebar main" menempatkan header di sepanjang kedua kolom. Elemen anak dengan grid-area: main mengisi setiap sel yang bernama main. Namanya tidak harus sama dengan nama class, tetapi menyamakannya membuat CSS lebih mudah dibaca.

Ukuran track yang umum

minmax(200px, 1fr) menjaga lebar kolom minimal 200 px sekaligus memungkinkan kolom tersebut melebar; auto menyesuaikan dengan konten; repeat(auto-fill, minmax(12rem, 1fr)) membuat sebanyak mungkin kolom yang muat, pola yang cocok untuk grid kartu. Jarak dapat dibuat fluid dengan generator CSS clamp.

Cara menggunakannya

  1. Pilih jumlah kolom dan baris, lalu masukkan ukurannya.
  2. Seret melintasi sel untuk membuat area, lalu ubah namanya.
  3. Salin CSS dan beri setiap elemen anak class sesuai areanya.

Privasi & batasan

Layout dibuat di browser Anda.

Alat terkait

CSS clamp()Box ShadowCSS FormatterFlexboxClip path

Pertanyaan umum

Apa arti fr?

Satu bagian dari ruang kosong: 1fr 2fr membuat kolom kedua memiliki lebar dua kali kolom pertama, setelah ukuran tetap dan jarak dikurangi.

Mengapa area tidak boleh saling tumpang tindih atau berbentuk L?

grid-template-areas hanya menerima bentuk persegi panjang, dan setiap nama hanya boleh digunakan sekali. Elemen yang saling tumpang tindih tetap bisa dibuat di CSS grid, tetapi harus menggunakan nomor garis secara eksplisit, bukan area bernama.

Bagaimana cara membuatnya responsif?

Gunakan CSS yang dihasilkan untuk layout lebar, lalu definisikan ulang grid-template-columns dan grid-template-areas di dalam media query untuk layar sempit.

Alat gratis · berjalan di browser anda · tanpa perlu akun