Joan eduki nagusira
LibraTool logoLibraTool

CSS Sarearen Sortzeaila doan

Diseinatu ikustoki batean CSS sareak — pistak, unitateak eta tarteak — eta kopiatu sortutako CSS eta HTML.

Linez kanpo funtzionatzen du behin kargatuta
Aurrealdiak
Zutabeak (3)
Errenkadak (2)
Aurreikuspena zuzenean
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>

🔒 Guztia zure nabigailean doa — ez da nahigoa igotzen.

Nola Funtzionatzen Du

Diseinatu CSS sareta bisualki: gehitu 8 zutabe eta 8 errenkada arte, ezarri pista bakoitza fr, px, auto edo min/max-content, eta doitu errenkada/zutabe tarteak. Zenbakidun aurrebista biziak berehala eguneratzen du eta sortutako grid-template CSS gehi bat datorren HTML klik batez zure arbelean daude.

  1. 1
    Moldatu sareta
    Gehitu/kendu zutabe eta errenkada + eta − erabiliz.
  2. 2
    Ezarri pistak
    Zutabe eta errenkada bakoitzak bere unitate propioa du (1fr, 100px, auto…).
  3. 3
    Doitu tarteak
    Errenkada-tarte eta zutabe-tarte graduatzaile bereiziak.
  4. 4
    Kopiatu kodea
    Ekoizpen-prest dagoen CSSa eta bat datorren HTML eskeletoa.

Dena zure nabigatzailean funtzionatzen du — ezer ez da igotzen.

Erlazionatutako tresnak

Maiz egiten diren galderak