سی ایس ایس گرڈ جنریٹر

کالموں، قطاروں اور خلا کی بصری طور پر وضاحت کریں، پھر اپنے لے آؤٹ کے لیے CSS گرڈ ٹیمپلیٹ کوڈ کاپی کریں۔

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

کالموں، قطاروں اور خلا کی بصری طور پر وضاحت کریں، پھر CSS گرڈ ٹیمپلیٹ کوڈ کاپی کریں۔
آپ کے براؤزر میں چلتا ہے۔
استعمال کرنے کے لیے مفت

استعمال کا طریقہ

کالم اور قطار کی گنتی سیٹ کریں۔
ٹیون گیپ اور ٹریک سائزنگ۔
گرڈ سی ایس ایس کو کاپی کریں۔

How this tool works

کالم اور قطار کی گنتی سیٹ کریں۔
ٹیون گیپ اور ٹریک سائزنگ۔
گرڈ سی ایس ایس کو کاپی کریں۔

Recommended settings

پہلے پہلے سے طے شدہ اختیارات استعمال کریں، پھر ضرورت پڑنے پر ایڈجسٹ کریں۔

Supported formats

Text / on-page input

File size and limits

پرانے فونز پر بہت پیچیدہ ملٹی لیئر پیش نظارہ سست محسوس ہو سکتے ہیں۔

Privacy

کلر اور سی ایس ایس جنریٹر مکمل طور پر آپ کے براؤزر میں چلتے ہیں۔ پیش نظارہ اور تبدیلیاں کبھی بھی آپ کی طرزیں اپ لوڈ نہیں کرتی ہیں۔

Common use cases

جب بھی آپ کو ضرورت ہو CSS گرڈ جنریٹر کا استعمال کریں: کالموں، قطاروں اور خلا کو بصری طور پر بیان کریں، پھر CSS گرڈ ٹیمپلیٹ کوڈ کاپی کریں۔

Troubleshooting

پیش نظارہ پیسٹ کے بعد مختلف نظر آتا ہے۔

اپنے صفحہ پر مسابقتی سی ایس ایس کی جانچ کریں (ری سیٹ، وراثت میں ملے رنگ)۔ تیار کردہ اصول کو پہلے الگ تھلگ اسٹائل شیٹ میں کاپی کریں۔

اکثر پوچھے گئے سوالات

کیا یہ میرا CSS اپ لوڈ کرتا ہے؟

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

کیا مجھے ایک اکاؤنٹ کی ضرورت ہے؟

نہیں، ٹول کھولیں، کنٹرولز کو بہتر کریں، اور CSS کاپی کریں۔