Neidio i'r prif gynnwys
LibraTool logoLibraTool

Generadur CSS Grid am ddim

Dylunio CSS grid yn ddeiliadol — traciau, unedau a bylchau — ac copïo'r CSS a HTML a gynhyrchwyd.

Yn gweithio all-lein ar ôl llwytho
Rhagosodiadau
Colofnau (3)
Rhesi (2)
Rhagolwg byw
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>

🔒 Mae popeth yn rhedeg yn eich porwr — ni chaiff dim ei uwchlwytho.

Sut Mae'n Gweithio

Dyluniwch grid CSS yn weledol: ychwanegwch hyd at 8 colofn ac 8 rhes, gosodwch bob trac i fr, px, auto neu min/max-content, ac addaswch y bylchau rhes/colofn. Mae'r rhagolwg byw wedi'i rifo'n diweddaru ar unwaith ac mae'r CSS grid-template a gynhyrchwyd ynghyd â'r HTML cyfatebol un clic o'ch clipfwrdd.

  1. 1
    Siapio'r grid
    Ychwanegwch/tynnwch golofnau a rhesi gyda + a −.
  2. 2
    Gosod y traciau
    Mae pob colofn a rhes yn cael ei huned ei hun (1fr, 100px, auto…).
  3. 3
    Mireinio'r bylchau
    Llithryddion row-gap a column-gap ar wahân.
  4. 4
    Copïo'r cod
    CSS parod i'w gynhyrchu a'r sgerbwd HTML cyfatebol.

Mae popeth yn rhedeg yn eich porwr — nid oes dim yn cael ei uwchlwytho.

Offer Cysylltiedig

↔️

Generadur CSS Flexbox

Arbrofi gyda chyfeiriad flex, lapio, cyfiawnhau ac alinio ar eitemau byw — ac copïo'r CSS.

Rhowch gynnig arni
📐

Generadur CSS clamp()

Cynhyrchwch werth CSS clamp() rhygl ar gyfer teipograffeg a bylchau cyfaneddol. Gosodwch faint min/max ac ystod porthiant, gweld rhagolwg byw, a chopïo'r CSS un-llinell.

Rhowch gynnig arni
📓

Papur Argraffadwy — Llinellog, Graff, Grid Dotiau a Phapur Cerddoriaeth (PDF)

Argraffwch eich papur eich hun: llinellog (llinellau llydan neu “college ruled”), graff, grid dotiau, isometrig, ymarfer llawysgrifen, erwydd cerddoriaeth neu nodiadau Cornell, mewn A4, Letter, A5 neu Legal, unrhyw liw llinell, cymaint o dudalennau ag sydd eu hangen arnoch. PDF fector miniog a wneir yn eich porwr.

Rhowch gynnig arni

Cwestiynau Cyffredin