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 فلېکس باکس جوړونکی

د فلېکس لوري، ورین، توازن او سمون سره په ژوندیو توکو تجربه وکړئ — او CSS کاپي کړئ.

هڅه یې وکړئ
📐

د CSS clamp() تولیدونکی

د ځوابگو ټایپوگرافۍ او فاصلې لپاره یو سیال CSS clamp() ارزښت تولید کړئ. د min/max اندازه او لید-ساحه حد وټاکئ، ژوندۍ مخکتنه وگورئ، او یو-کرښه CSS کاپي کړئ.

هڅه یې وکړئ
🧾

د فاکتور جوړونکی

یو مسلکي فاکتور جوړ کړئ او یو پاک PDF ډاونلوډ یې کړئ — د کرښو توکي، مالیات، تخفیف، څو اسعار. نه راجستریشن، نه اپلوډ، draft په ځایي ډول خوندي کیږي.

هڅه یې وکړئ

په مکرر ډول پوښتل شوې پوښتنې