Sameeyaha CSS Grid oo Bilaash ah
Naqshadee grid CSS ah si muuqaal ah — tracks, halbeegyo iyo gaps — kadibna koobi CSS-ka iyo HTML-ka la abuuray.
Naqshadee grid CSS ah si muuqaal ah: ku dar tiirar iyo saf, isku dar halbeegyada fr/px/auto/min-content, hagaaji gaps-ka, oo daawo preview-ga toos ah. Koobi CSS diyaar u ah isticmaal iyo HTML u dhigma.
.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>🔒 Wax walba waxay ku socdaan browser-kaaga — waxba lama soo shubo.
Sida Ay U Shaqeyso
Naqshadee CSS grid muuqaal ahaan: ku dar ilaa 8 tiir iyo 8 saf, deji socod kasta fr, px, auto ama min/max-content, oo hagaaji farqiyada saf/tiir. Fiiriyaha lambarrayn-toos-ah ayaa isla markiiba cusboonaysiin, CSS-ka grid-template la sameeyay iyo HTML u dhigma waxay hal-guji ka fog yihiin clipboard-kaaga.
- 1Qaabee shabaggaKu dar/ka saar tiirar iyo safaf + iyo −.
- 2Deji socodyadaTiir iyo saf kastaaba wuxuu helaa unuggiisa gaarka ah (1fr, 100px, auto…).
- 3Habee farqiyadaSliders gooni ah oo row-gap iyo column-gap ah.
- 4Koobi koodhkaCSS diyaar-u-ah-wax-soo-saarka iyo skeleton HTML u dhigma.
Wax walba wuxuu ka shaqeeyaa biraawsarkaaga — waxba lama shubo.
Qalabka La Xiriira
Sameeyaha CSS Flexbox
Isku day jihada flex, wrap-ka, justify iyo align on live items — kadibna koobi CSS-ka.
Soo Saaraha CSS clamp()
Samee qiime CSS clamp() dabacsan oo loogu talagalay far-qoraalka jawaab-celinta iyo booska. Dej cabbirka ugu yar/ugu badan iyo xadka viewport-ka, arag hordhac tooska ah, oo nuqul CSS-ka hal sadarka ah.
Sameeyaha Qaansheegta
Samee qaansheeg xirfadle ah oo soo deji PDF nadiif ah — alaabta, canshuurta, dhimista, lacago badan. Is-diiwaangelin ma jirto, dul-galin ma jirto, qabyo-qoraal si maxalli ah ayaa loo kaydiyaa.