Readdy logo

CSS گرڈ جنریٹر

CSS Grid بصری بنائیں—کالم، قطار، فاصلہ اور علاقے بدل کر کوڈ کاپی کریں

Grid پیش منظر

1.1
1.2
1.3
2.1
2.2
2.3
3.1
3.2
3.3

تیار CSS

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

CSS Grid جنریٹر کیسے استعمال کریں

CSS کا طاقتور لے آؤٹ نظام۔ Parameters بدل اور cells پر کلک کرکے پیچیدہ Grid بنائیں، پھر کوڈ منصوبے میں کاپی کریں۔

1

کالم اور قطار طے کریں

مطلوبہ تعداد چنیں اور number inputs سے ساخت بدلیں۔

2

سائز اور فاصلہ ترتیب دیں

کسی CSS unit سے کالم چوڑائی، قطار اونچائی اور cells کا فاصلہ طے کریں۔

3

علاقے چننے کے لیے کلک کریں

Cells پر کلک کرکے نام زد Grid علاقے بنائیں؛ ہر منتخب cell الگ علاقہ ہوگا۔

4

کوڈ کاپی کریں

"کوڈ کاپی کریں" دبائیں، CSS اسٹائل شیٹ میں چسپاں کرکے لے آؤٹ بنائیں۔

ہمارا CSS Grid جنریٹر کیوں

Grid CSS دستی لکھنا چھوڑیں۔ بصری ڈیزائن، فوری لے آؤٹ اور ایک کلک تیار کوڈ پائیں۔

  • بصری کلک ڈیزائن

    بنتا Grid دیکھیں؛ cells سے نام زد علاقے چنیں، grid-template-areas ذہن میں رکھنے کی ضرورت نہیں۔

  • لچک دار units

    ہر درست CSS unit استعمال کریں: fr، px، %، em، rem، auto، minmax()، repeat()؛ ریسپانسیو لے آؤٹ کے لیے ملائیں۔

  • فوری کوڈ تخلیق

    ڈیزائن مکمل ہوتے ہی تیار CSS پائیں۔ نہ دستی کوڈ، نہ syntax غلطی—براہِ راست کاپی کریں۔

  • Grid علاقے کے نام

    Cells چن کر نام زد علاقے بنائیں۔ جنریٹر grid-template-areas لکھ کر CSS قابلِ مطالعہ و انتظام رکھتا ہے۔

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

CSS Grid دو جہتی نظام ہے جو عناصر کو قطار اور کالم میں ساتھ ترتیب دیتا ہے، پیچیدہ صفحات کے لیے طاقتور ٹول۔
grid-template-areas علاقوں کو نام دے کر عناصر جوڑتا ہے۔ قطار و کالم گننے کے بجائے 'header'، 'sidebar' یا 'main' براہِ راست لیں۔
ہر درست unit: fr، px، %، em، rem، auto، minmax()، repeat()۔ fr دستیاب جگہ تناسب سے بانٹتا ہے۔
ہاں، CSS Grid جنریٹر بلا حد مفت ہے۔ سائن اپ کے بغیر جتنے چاہیں لے آؤٹ بنائیں۔

چند سیکنڈ میں بہترین Grid لے آؤٹ