Pāriet uz galveno saturu
LibraTool logoLibraTool

CSS režģa ģenerators bez maksas

Vizuāli noformējiet CSS režģi — sliedes, vienības un spraugas — un kopējiet ģenerēto CSS un HTML.

Darbojas bezsaistē pēc ielādes
Priekšiestatījumi
Kolonas (3)
Rindas (2)
Tiešraides priekšskatījums
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>

🔒 Viss darbojas jūsu pārlūkprogrammā — nekas netiek augšupielādēts.

Kā tas darbojas

Izveidojiet CSS režģi vizuāli: pievienojiet līdz 8 kolonnām un 8 rindām, iestatiet katru celiņu uz fr, px, auto vai min/max-content, un pielāgojiet rindu/kolonnu atstarpes. Numurētais dzīvais priekšskatījums atjaunojas uzreiz, un ģenerētais grid-template CSS plus atbilstošais HTML ir viens klikšķis no jūsu starpliktuves.

  1. 1
    Veidojiet režģi
    Pievienojiet/noņemiet kolonnas un rindas ar + un −.
  2. 2
    Iestatiet celiņus
    Katrai kolonnai un rindai ir sava vienība (1fr, 100px, auto…).
  3. 3
    Pielāgojiet atstarpes
    Atsevišķi row-gap un column-gap slīdņi.
  4. 4
    Kopējiet kodu
    Ražošanai gatavs CSS un atbilstošais HTML skelets.

Viss darbojas jūsu pārlūkprogrammā — nekas netiek augšupielādēts.

Saistītie rīki

↔️

CSS Flexbox ģenerators

Eksperimentējiet ar flex virzienu, apvītošanu, justify un align uz tiešajiem elementiem — un kopējiet CSS.

Izmēģināt
📐

CSS clamp() ģenerētājs

Ģenerē plūstošu CSS clamp() vērtību responsvai tipogrāfijai un atstarpēm. Iestatiet min/max izmēru un skatāmā loga diapazonu, skatiet tiešraides priekšskatījumu un kopējiet vienas rindas CSS.

Izmēģināt
📓

Drukājams papīrs — līnijots, rūtiņu, punktots un nošu papīrs (PDF)

Izdrukājiet savu papīru: līnijotu (platu vai college), rūtiņu, punktu režģi, izometrisku, rokraksta vingrinājumus, nošu līnijas vai Cornell piezīmes formātos A4, Letter, A5 vai Legal, jebkurā līniju krāsā un ar tik daudz lappušu, cik vajag. Ass vektoru PDF, kas tiek izveidots jūsu pārlūkprogrammā.

Izmēģināt

Bieži uzdotie jautājumi