Негізгі мазмұнға өту
LibraTool logoLibraTool

CSS торы генераторы — тегін

CSS торын визуалды түрде құрастырыңыз — трекілер, бірліктер және аралықтар — және құрастырылған 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
    Аралықтарды реттеңіз
    Бөлек жол-аралығы мен баған-аралығы сырғытпалары.
  4. 4
    Кодты көшіріңіз
    Өндіріске-дайын CSS және сәйкес HTML қаңқасы.

Барлығы браузеріңізде жұмыс істейді — ешнәрсе жүктелмейді.

Байланысты құралдар

↔️

CSS Flexbox генераторы

Ағы бағыты, оранды, біліктенді және түсінік өндіктерге әрекет жасаңыз — және CSS-ді көшіріңіз.

Байқап көріңіз
📐

CSS clamp() генераторы

Адаптивті типография және бос орын үшін сұйық CSS clamp() мәнін жасаңыз. Минимум/максимум өлшем мен көрініс порт ауқымын орнатыңыз, тірі алдын ала қараңыз және бір жолды CSS-ті көшіріңіз.

Байқап көріңіз
📓

Басып шығаруға арналған қағаз — Сызықты, торлы, нүктелі және нота қағазы (PDF)

Өз қағазыңызды басып шығарыңыз: сызықты (кең немесе колледж сызығы), торлы, нүктелі, изометриялық, жазу жаттығуы, нота сызықтары немесе Cornell жазбалары; A4, Letter, A5 немесе Legal өлшемінде, кез келген сызық түсімен, қажетті бет санымен. Браузеріңізде жасалатын айқын векторлық PDF.

Байқап көріңіз

Жиі қойылатын сұрақтар