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 гузоред ва фосилаи сатр/сутунро танзим кунед. Пешнамоиши зиндаи рақамгузошташуда фавран нав мешавад ва CSS-и grid-template-и тавлидшуда ба илова HTML-и мувофиқ бо як зер аз ҳофизаи шумост.

  1. 1
    Тӯрро шакл диҳед
    Сутун ва сатрҳоро бо + ва − илова/хориҷ кунед.
  2. 2
    Пайҳоро танзим кунед
    Ҳар сутун ва сатр воҳиди худро мегирад (1fr, 100px, auto…).
  3. 3
    Фосилаҳоро танзим кунед
    Лағжонакҳои алоҳидаи row-gap ва column-gap.
  4. 4
    Рамзро нусхабардорӣ кунед
    CSS-и омодаи истеҳсолот ва скелети мувофиқи HTML.

Ҳама чиз дар браузери шумо кор мекунад — ҳеҷ чиз бор карда намешавад.

Абзорҳои марбут

Саволҳои зуд-зуд додашаванда