میں بصری طور پر CSS گرڈ لے آؤٹ کیسے بناؤں؟

گرڈ سیٹ کرنے کے لیے کالم شامل کریں اور قطار شامل کریں استعمال کریں، ہر ٹریک کے لیے ایک اکائی منتخب کریں، اور کالم gap اور قطار gap کو ایڈجسٹ کریں۔ پھر CSS یا مماثل HTML لینے کے لیے کاپی کریں دبائیں۔

میں کتنے کالم اور قطاریں شامل کر سکتا ہوں، اور کون سی اکائیاں دستیاب ہیں؟

12 کالم اور 12 قطاروں تک۔ ہر ٹریک 1fr، 2fr، 3fr، auto، مقررہ px اقدار، فیصد، min-content، max-content یا minmax(100px, 1fr) طرز کی حدود ہو سکتا ہے۔

کیا شروع کرنے کے لیے تیار کردہ لے آؤٹ موجود ہیں؟

جی ہاں۔ پری سیٹس مقدس جام، سائڈ بار + مواد، 12-کالم اور فوٹو گیلری ہیں۔ ایک منتخب کریں، پھر اپنے صفحے کے مطابق ٹریکس اور گیپس میں ترمیم کریں۔

میں Bootstrap جیسا 12 کالم والا گرڈ کیسے بناؤں؟

12-کالم پری سیٹ منتخب کریں، جو 16px کے گیپ کے ساتھ بارہ 1fr کالم سیٹ کرتا ہے۔ پھر آپ کالم gap سلائیڈر کو تبدیل کر سکتے ہیں، جو 0 سے 48px تک جاتا ہے۔

کیا ٹول میرا گرڈ کہیں بھیجتا ہے، اور کیا میں لے آؤٹ شیئر کر سکتا ہوں؟

سب کچھ آپ کے براؤزر میں چلتا ہے اور کچھ بھی اپ لوڈ نہیں ہوتا۔ ٹول صفحے کے URL سے ترتیب کو بحال کرنے کے لیے بنایا گیا ہے، لہٰذا ایک لنک آپ کے گرڈ کو دوبارہ بنا سکتا ہے۔

کیا یہ واقعی مفت ہے؟

جی ہاں۔ ہر ٹول مفت استعمال کے لیے ہے، بغیر اکاؤنٹ اور بغیر کریڈٹ کارڈ کے۔ کام ہمارے سرورز کی بجائے آپ کے آلے پر چلتا ہے، جو اسے چلانے میں مفت رکھتا ہے۔

کیا یہ موبائل پر کام کرتا ہے؟

جی ہاں۔ یہ iOS اور Android کے موجودہ موبائل براؤزرز میں چلتا ہے، کچھ انسٹال کرنے کی ضرورت نہیں۔

🟦

مفت CSS گرڈ جنریٹر

CSS گرڈ کو بصری طور پر ڈیزائن کریں — ٹریکس، یونٹ اور gaps — اور تیار شدہ CSS اور HTML کو کاپی کریں۔

آپ کے براؤزر میں چلتا ہےسائن اپ نہیں، پاپ اپ نہیںلاگ ان کی ضرورت نہیںہمیشہ کے لیے مفت

لوڈ ہونے کے بعد آف لائن کام کرتا ہے

CSS گرڈ کو بصری طور پر ڈیزائن کریں: کالمز اور قطاریں شامل کریں، fr/px/auto/min-content یونٹس کو ملائیں، gaps کو ایڈجسٹ کریں، اور براہ راست پیش نظارہ دیکھیں۔ تیاری کے لیے تیار CSS اور میچنگ HTML کو کاپی کریں۔

پری سیٹ

کالمز (3)

قطاریں (2)

کالم gap: 16pxقطار gap: 16px

براہ راست پیش نظارہ

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 grid ڈیزائن کریں: 8 کالمز اور 8 قطاروں تک شامل کریں، ہر track کو fr، px، auto یا min/max-content پر مقرر کریں، اور قطار/کالم gaps ایڈجسٹ کریں۔ نمبردار براہ راست پیش نظارہ فوراً اپ ڈیٹ ہوتا ہے اور تیار کردہ grid-template CSS کے ساتھ مماثل HTML آپ کے کلپ بورڈ سے ایک کلک دور ہیں۔

1
grid کی شکل بنائیں
+ اور − کے ساتھ کالمز اور قطاریں شامل/ہٹائیں۔
2
tracks مقرر کریں
ہر کالم اور قطار کی اپنی اکائی ہوتی ہے (1fr، 100px، auto…)۔
3
gaps ٹیون کریں
الگ row-gap اور column-gap سلائیڈرز۔
4
کوڈ کاپی کریں
پروڈکشن کے لیے تیار CSS اور مماثل HTML ڈھانچہ۔

سب کچھ آپ کے براؤزر میں چلتا ہے — کچھ بھی اپ لوڈ نہیں ہوتا۔

مفت CSS گرڈ جنریٹر

یہ کیسے کام کرتا ہے

متعلقہ ٹولز

CSS Flexbox جنریٹر

CSS clamp() جنریٹر

قابلِ پرنٹ کاغذ — لکیر دار، گراف، ڈاٹ گرڈ اور میوزک پیپر (PDF)

اکثر پوچھے جانے والے سوالات