Lumaktaw sa pangunahing nilalaman
LibraTool logoLibraTool

Libreng Gumagawa ng CSS Grid

I-design nang visual ang CSS grid — tracks, units at gaps — at kopyahin ang generated CSS at HTML.

Gumagana offline kapag na-load na
Mga preset
Mga column (3)
Mga row (2)
Live na Preview
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>

🔒 Lahat ay tumatakbo sa iyong browser — walang upload.

Paano ito Gumagana

Magdisenyo ng CSS grid nang biswal: magdagdag ng hanggang 8 column at 8 row, itakda ang bawat track sa fr, px, auto o min/max-content, at ayusin ang row/column gap. Agad nag-a-update ang may-numerong live preview at isang click lang para makopya sa clipboard ang nabuong grid-template CSS at katugmang HTML.

  1. 1
    Hubugin ang grid
    Magdagdag/mag-alis ng column at row gamit ang + at −.
  2. 2
    Itakda ang mga track
    May sariling unit ang bawat column at row (1fr, 100px, auto…).
  3. 3
    Ayusin ang mga gap
    Magkahiwalay na slider para sa row-gap at column-gap.
  4. 4
    Kopyahin ang code
    CSS na handa sa production at ang katugmang HTML skeleton.

Tumatakbo ang lahat sa iyong browser — walang ina-upload.

Mga Kaugnay na Tool

↔️

Gumagawa ng CSS Flexbox

Mag-eksperimento sa flex direction, wrap, justify at align sa live items — at kopyahin ang CSS.

Subukan
📐

Gumagawa ng CSS clamp()

Gumawa ng fluid na CSS clamp() na value para sa responsive na typography at spacing. Itakda ang min/max na laki at viewport range, tingnan ang live preview, at kopyahin ang one-line na CSS.

Subukan
📓

Printable Paper — Lined, Graph, Dot Grid at Music Paper (PDF)

I-print ang sarili mong papel: lined (wide o college ruled), graph, dot grid, isometric, handwriting practice, music staff o Cornell notes, sa A4, Letter, A5 o Legal, anumang kulay ng linya, kasing-dami ng pahinang kailangan mo. Isang malinaw na vector PDF na ginawa sa iyong browser.

Subukan

Mga Madalas na Itanong