Тавлидгари шабакаи CSS-и ройгон
Шабакаи CSS-ро ба таври намоён тарҳрезӣ кунед — трекҳо, воҳидҳо ва фосилаҳо — ва CSS ва HTML тавлидшударо нусхабардорӣ кунед.
Шабакаи CSS-ро ба таври намоён тарҳрезӣ кунед: сутунҳо ва сатрҳо илова кунед, воҳидҳои fr/px/auto/min-content-ро омехта кунед, фосилаҳоро танзим кунед ва пешнамоиши зиндаро тамошо кунед. CSS ва HTML-и барои истифода тайёрро нусхабардорӣ кунед.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 16px;
}<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Тӯрро шакл диҳедСутун ва сатрҳоро бо + ва − илова/хориҷ кунед.
- 2Пайҳоро танзим кунедҲар сутун ва сатр воҳиди худро мегирад (1fr, 100px, auto…).
- 3Фосилаҳоро танзим кунедЛағжонакҳои алоҳидаи row-gap ва column-gap.
- 4Рамзро нусхабардорӣ кунедCSS-и омодаи истеҳсолот ва скелети мувофиқи HTML.
Ҳама чиз дар браузери шумо кор мекунад — ҳеҷ чиз бор карда намешавад.
Абзорҳои марбут
Тавлидгари CSS Flexbox
Самт, печондан, ҷобаҷогузорӣ ва баробаркуниро дар унсурҳои зинда озмоед — ва CSS-ро нусхабардорӣ кунед.
Тавлидкунандаи CSS clamp()
Арзиши равони CSS clamp()-ро барои шрифт ва фосилаи ҷавобгӯй тавлид кунед. Андозаи ҳадди ақал/ҳадди аксар ва диапазони viewport-ро гузоред, пешнамоиши зинда бубинед ва CSS-и якхаттаро нусхабардорӣ кунед.
Тавлидкунандаи ҳисобнома
Ҳисобномаи касбиро эҷод карда, PDF-и тозаро боргирӣ кунед — сатрҳои мол, андоз, тахфиф, бисёрасъорӣ. Бидуни бақайдгирӣ, бидуни боркунӣ, лоиҳа маҳаллан захира мешавад.