CSS Grid جنریٹر
اپنے کالم اور رو سیٹ کریں، آئٹمز رکھنے کے لیے خلیوں پر ڈریگ کریں، اور ایک کلک میں گرڈ CSS اور مماثل HTML کاپی کریں۔
آپ کا گرڈ براہ راست آپ کے براؤزر میں تیار کیا جاتا ہے۔ آپ کی سیٹ کی ہوئی کوئی بھی چیز BroBroGo پر اپ لوڈ نہیں کی جاتی۔
عمومی سوالات
میں گرڈ پر آئٹمز کیسے رکھوں؟
خلیوں (cells) پر کلک کر کے ڈریگ کریں تاکہ ایک مستطیل بن جائے — جب آپ چھوڑیں گے تو یہ ان کالموں اور رو پر پھیلا ہوا ایک آئٹم بن جائے گا۔ آپ کے بنائے ہوئے ہر آئٹم کو CSS میں اپنا grid-column اور grid-row رول اور HTML میں ایک مماثل div ملتا ہے۔ آئٹمز ایک دوسرے کے اوپر آ سکتے ہیں، اور بعد میں بنایا گیا آئٹم اوپر نظر آئے گا؛ کسی آئٹم کو ہٹانے کے لیے اس پر موجود × کا استعمال کریں۔
کیا کالم اور رو مختلف سائز کے ہو سکتے ہیں؟
جی ہاں۔ ہر ٹریک کا اپنا سائز باکس ہوتا ہے، اور آپ وہاں کوئی بھی گرڈ ویلیو ٹائپ کر سکتے ہیں — 1fr, 200px, auto, min-content یا minmax(120px, 1fr)۔ یکساں سائز والے ٹریکس کو repeat() میں یکجا کر دیا جاتا ہے تاکہ آؤٹ پٹ مختصر رہے۔ کالم گیپ اور رو گیپ الگ الگ سیٹ کیے جاتے ہیں، اور یکساں ہونے پر ایک ہی گیپ میں بدل جاتے ہیں۔
میں تیار کردہ کوڈ کا کیا کروں؟
CSS اور HTML کو ساتھ ساتھ کاپی کریں۔ HTML آپ کو کنٹینر دیتا ہے جس میں ہر آئٹم کے لیے ایک div ہوتا ہے، اور CSS گرڈ کی وضاحت کرتا ہے اور ہر آئٹم کی پوزیشن سیٹ کرتا ہے۔ دونوں کو اپنے پروجیکٹ میں پیسٹ کریں اور آپ کو وہی لے آؤٹ مل جائے گا جو آپ نے یہاں بنایا تھا۔