Langkau ke kandungan utama
LibraTool logoLibraTool

Penjana Petak CSS percuma

Reka bentuk petak CSS secara visual — trek, unit dan jurang — dan salin CSS dan HTML yang dijana.

Berfungsi luar talian selepas dimuatkan
Pratetapan
Lajur (3)
Baris (2)
Pratonton langsung
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 Segala-galanya berjalan dalam pelayar anda — tiada yang dimuat naik.

Cara ia berfungsi

Reka bentuk grid CSS secara visual: tambah sehingga 8 lajur dan 8 baris, tetapkan setiap trek kepada fr, px, auto atau min/max-content, dan laras jurang baris/lajur. Pratonton langsung bernombor dikemas kini serta-merta dan CSS grid-template dijana ditambah HTML sepadan ialah satu klik daripada papan keratan anda.

  1. 1
    Bentuk grid
    Tambah/buang lajur dan baris dengan + dan −.
  2. 2
    Tetapkan trek
    Setiap lajur dan baris mendapat unitnya sendiri (1fr, 100px, auto…).
  3. 3
    Laras jurang
    Penggelangsar row-gap dan column-gap berasingan.
  4. 4
    Salin kod
    CSS sedia-pengeluaran dan rangka HTML sepadan.

Segalanya berjalan dalam pelayar anda — tiada apa dimuat naik.

Alat berkaitan

↔️

Penjana Flexbox CSS

Eksperimen dengan arah flex, bungkus, justifikasi dan selaras pada item langsung — dan salin CSS.

Cuba
📐

Penjana clamp() CSS

Jana nilai clamp() CSS yang lancar untuk tipografi dan jarak responsif. Tetapkan saiz min/maks dan julat viewport, lihat pratonton langsung, dan salin CSS satu baris.

Cuba
📓

Kertas Boleh Cetak — Kertas Bergaris, Graf, Grid Titik dan Kertas Muzik (PDF)

Cetak kertas anda sendiri: bergaris (garis lebar atau garis kolej), graf, grid titik, isometrik, latihan tulisan tangan, kerja muzik atau nota Cornell, dalam A4, Letter, A5 atau Legal, sebarang warna garisan, sebanyak mana halaman yang anda perlukan. PDF vektor tajam yang dibuat dalam pelayar anda.

Cuba

Soalan lazim