Անցնել հիմնական բովանդակությանը
LibraTool logoLibraTool

CSS Grid Գեներատոր անվճար

Վիզուալ ներածեք CSS grid — հետքեր, միավորներ և բացեր — և պատճեն անեք ստեղծված CSS և HTML:

Աշխատում է անցանց՝ բեռնվելուց հետո
Նախահատկերներ
Սյուներ (3)
Տողեր (2)
Իրական ժամանակի նախադիտում
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>

🔒 Ամբողջը աշխատում է ձեր դիտարկիչում — ոչինչ չի վերբեռնվում:

Ինչպես է այն աշխատում

Ձևավորեք CSS ցանցը տեսողականորեն. ավելացրեք մինչև 8 սյունակ և 8 տող, սահմանեք ամեն ուղին fr, px, auto կամ min/max-content, և ճշգրտեք տողի/սյունակի բացերը։ Համարակալված կենդանի նախադիտումն ակնթարթորեն թարմացվում է, և ստեղծված grid-template CSS-ը գումարած համապատասխան HTML-ը մեկ սեղմումով ձեր սեղմատախտակում է։

  1. 1
    Ձևավորեք ցանցը
    Ավելացրեք/հեռացրեք սյունակներ և տողեր + և −-ով։
  2. 2
    Սահմանեք ուղիները
    Ամեն սյունակ ու տող ստանում է իր սեփական միավորը (1fr, 100px, auto…)։
  3. 3
    Ճշգրտեք բացերը
    Առանձին row-gap և column-gap սահիչներ։
  4. 4
    Պատճենեք կոդը
    Արտադրության-պատրաստ CSS և համապատասխան HTML կմախք։

Ամեն ինչ աշխատում է ձեր դիտարկիչում — ոչինչ չի վերբեռնվում։

Առնչվող գործիքներ

↔️

CSS Flexbox Գեներատոր

Փորձեք flex ուղղությունը, փաթեթը, հիմնավորումը և հավասարեցումը իրական տարրերի վրա — և պատճեն անեք CSS-ը:

Փորձեք այն
📐

CSS clamp() գեներատոր

Ստեղծեք հոսուն CSS clamp() արժեք ռեսպոնսիվ տպագրության ու բացատի: Սահմանեք նվազ/մեծ չափ ու viewport տիրույթ, տեսեք ուղիղ նախադիտում ու պատճենեք մեկ տողի CSS:

Փորձեք այն
📓

Տպելու թուղթ — Գծավոր, վանդակավոր, կետավոր և նոտաների թուղթ (PDF)

Տպեք ձեր սեփական թուղթը. գծավոր (լայն կամ քոլեջի), վանդակավոր, կետավոր, իզոմետրիկ, գեղագրության վարժանք, նոտային գծեր կամ Cornell նշումներ՝ A4, Letter, A5 կամ Legal չափով, ցանկացած գծի գույնով, այնքան էջով, որքան պետք է։ Հստակ վեկտորային PDF՝ ստեղծված ձեր դիտարկիչում։

Փորձեք այն

Հաճախակի տրվող հարցեր