CSS Grid جنریٹر کا تعارف اور کام کرنے کا طریقہ
"CSS Grid جنریٹر" ایک ایسا بصری ٹول ہے جو آپ کو کالم اور رو کی تعداد سیٹ کر کے، ان کے سائز کا تعین کر کے، اور ان کے درمیان فاصلہ (gaps) مقرر کر کے ایک CSS گرڈ لے آؤٹ کو ڈیزائن کرنے کی سہولت دیتا ہے۔ اس ٹول میں آپ گرڈ کے خلیوں (cells) پر ڈریگ کر کے آئٹمز کو لے آؤٹ کے اندر رکھ سکتے ہیں۔ یہ ٹول خود بخود آپ کے ڈیزائن کردہ گرڈ کے مطابق CSS اور HTML کوڈ تیار کرتا ہے، جسے آپ کاپی کر کے اپنے پروجیکٹ میں استعمال کر سکتے ہیں۔
یہ ٹول ان لوگوں کے لیے انتہائی مفید ہے جو:
- کسی CSS گرڈ لے آؤٹ کا تیزی سے پروٹوٹائپ بنانا چاہتے ہیں۔
- دستی طور پر کوڈ لکھے بغیر کسی گرڈ لے آؤٹ کے لیے CSS اور HTML تیار کرنا چاہتے ہیں۔
- یہ دیکھنا چاہتے ہیں کہ کالم اور رو کے مختلف سائز گرڈ لے آؤٹ پر کیسے اثر انداز ہوتے ہیں۔
- سائیڈ بار، ہیڈر/فوٹر، گیلری، یا ڈیش بورڈ کی ساخت پر مبنی لے آؤٹ بنانا چاہتے ہیں۔
ان پٹ اور کنٹرولز کی تفصیلات
اس ٹول کو استعمال کرنے کے لیے درج ذیل ان پٹ اور کنٹرولز فراہم کیے گئے ہیں:
- کالم: آپ کالموں کی تعداد 1 سے 12 کے درمیان سیٹ کر سکتے ہیں۔
- رو (Rows): آپ رو کی تعداد 1 سے 12 کے درمیان سیٹ کر سکتے ہیں۔
- کالم کا فاصلہ: کالموں کے درمیان فاصلہ 0 سے 48px کے درمیان مقرر کیا جا سکتا ہے۔
- رو کا فاصلہ (Row gap): رو کے درمیان فاصلہ 0 سے 48px کے درمیان مقرر کیا جا سکتا ہے۔
- کالم کے سائز: اس میں آپ کوئی بھی درست CSS گرڈ ویلیو لکھ سکتے ہیں، جیسے کہ
1fr،200px،auto،min-content، یاminmax(120px, 1fr)۔ - رو کے سائز: اس میں بھی کوئی بھی درست CSS گرڈ ویلیو لکھی جا سکتی ہے، جیسے کہ
1fr،200px،auto،min-content، یاminmax(120px, 1fr)۔ - آئٹم کی پوزیشننگ (Item placement): گرڈ کے خلیوں پر ماؤس سے ڈریگ کر کے ایک مستطیل علاقہ منتخب کیا جاتا ہے جس سے آئٹم وہاں سیٹ ہو جاتا ہے۔
ٹول کے قوانین اور تکنیکی خصوصیات
اس ٹول کو استعمال کرتے وقت درج ذیل قوانین اور خصوصیات کام کرتی ہیں:
- آئٹم بنانا اور ہٹانا: جب آپ خلیوں پر ڈریگ کرنے کے بعد ماؤس چھوڑتے ہیں، تو منتخب کردہ کالموں اور رو پر پھیلا ہوا ایک چائلڈ آئٹم بن جاتا ہے۔ ہر بنائے گئے آئٹم کو CSS میں اپنا
grid-columnاورgrid-rowرول ملتا ہے اور HTML میں ایک مماثلdivدیا جاتا ہے۔ - آئٹمز کا اوورلیپ ہونا: آئٹمز ایک دوسرے کے اوپر آ سکتے ہیں؛ جو آئٹم بعد میں بنایا جائے گا، وہ اوپر نظر آئے گا۔ کسی بھی آئٹم کو ہٹانے کے لیے اس پر موجود "×" کے نشان پر کلک کریں۔
- ٹریک سائزنگ اور repeat() کا استعمال: ہر کالم اور رو (ٹریک) کا اپنا سائز باکس ہوتا ہے جہاں آپ کوئی بھی گرڈ ویلیو ٹائپ کر سکتے ہیں۔ اگر متعدد ٹریکس کا سائز ایک جیسا ہو، تو آؤٹ پٹ CSS میں انہیں مختصر کرنے کے لیے
repeat()کا استعمال کیا جاتا ہے۔ - فاصلے (Gaps) کا اصول: کالم کا فاصلہ اور رو کا فاصلہ الگ الگ سیٹ کیے جاتے ہیں، لیکن اگر یہ دونوں یکساں ہوں، تو آؤٹ پٹ CSS میں یہ سکڑ کر ایک ہی
gapپراپرٹی بن جاتے ہیں۔ - حدود اور بٹن: یہ ٹول زیادہ سے زیادہ 16 آئٹمز کو سپورٹ کرتا ہے۔ "آئٹمز صاف کریں" پر کلک کرنے سے HTML کنٹینر خالی ہو جاتا ہے اور آئٹمز کی تعداد 0 ہو جاتی ہے۔ "آئٹم شامل کریں" پر کلک کرنے سے ایک HTML آئٹم تیار ہوتا ہے۔
- غلط ویلیو کا اندراج: اگر ٹریک سائز کے لیے کوئی غلط ویلیو (جیسے
not-a-grid-track) درج کی جائے، تو ان پٹ فیلڈ کو غلط (invalid) کے طور پر نشان زد کر دیا جاتا ہے، لیکن CSS آؤٹ پٹ میں آخری درست ویلیو برقرار رہتی ہے۔
لے آؤٹ پری سیٹس
فوری ڈیزائننگ کے لیے ٹول میں کچھ پہلے سے تیار کردہ لے آؤٹ یعنی "پری سیٹس" فراہم کیے گئے ہیں:
- سائیڈ بار
- ہیڈر اور فوٹر
- گیلری: یہ پری سیٹ خاص طور پر 3 کالم، 2 رو اور 3 آئٹمز تیار کرتا ہے۔
- ڈیش بورڈ
آؤٹ پٹ اور کوڈ کا حصول
ڈیزائن مکمل ہونے پر یہ ٹول آپ کو دو قسم کے آؤٹ پٹ فراہم کرتا ہے:
- CSS: گرڈ کنٹینر اور اس میں رکھے گئے ہر آئٹم کے لیے تیار کردہ CSS کوڈ۔
- HTML: گرڈ کنٹینر اور اس کے اندر موجود ہر آئٹم کے لیے تیار کردہ
divعناصر پر مشتمل HTML کوڈ۔
آپ اس کوڈ کو آسانی سے کاپی کر کے اپنے ویب پروجیکٹ میں استعمال کر سکتے ہیں۔
پرائیویسی اور ڈیٹا پروسیسنگ
آپ کی پرائیویسی ہمارے لیے اہم ہے۔ آپ کا گرڈ براہ راست آپ کے براؤزر میں تیار کیا جاتا ہے۔ آپ کی سیٹ کی ہوئی کوئی بھی چیز BroBroGo پر اپ لوڈ نہیں کی جاتی۔
اکثر پوچھے گئے سوالات (FAQ)
میں گرڈ پر آئٹمز کیسے رکھوں؟
خلیوں (cells) پر کلک کر کے ڈریگ کریں تاکہ ایک مستطیل بن جائے — جب آپ چھوڑیں گے تو یہ ان کالموں اور رو پر پھیلا ہوا ایک آئٹم بن جائے گا۔ آپ کے بنائے ہوئے ہر آئٹم کو CSS میں اپنا grid-column اور grid-row رول اور HTML میں ایک مماثل div ملتا ہے۔ آئٹمز ایک دوسرے کے اوپر آ سکتے ہیں، اور بعد میں بنایا گیا آئٹم اوپر نظر آئے گا؛ کسی آئٹم کو ہٹانے کے لیے اس پر موجود × کا استعمال کریں۔
کیا کالم اور رو مختلف سائز کے ہو سکتے ہیں؟
جی ہاں۔ ہر ٹریک کا اپنا سائز باکس ہوتا ہے، اور آپ وہاں کوئی بھی گرڈ ویلیو ٹائپ کر سکتے ہیں — 1fr، 200px، auto، min-content یا minmax(120px, 1fr)۔ یکساں سائز والے ٹریکس کو repeat() میں یکجا کر دیا جاتا ہے تاکہ آؤٹ پٹ مختصر رہے۔ کالم گیپ اور رو گیپ الگ الگ سیٹ کیے جاتے ہیں، اور یکساں ہونے پر ایک ہی گیپ میں بدل جاتے ہیں۔
میں تیار کردہ کوڈ کا کیا کروں؟
CSS اور HTML کو ساتھ ساتھ کاپی کریں۔ HTML آپ کو کنٹینر دیتا ہے جس میں ہر آئٹم کے لیے ایک div ہوتا ہے، اور CSS گرڈ کی وضاحت کرتا ہے اور ہر آئٹم کی پوزیشن سیٹ کرتا ہے۔ دونوں کو اپنے پروجیکٹ میں پیسٹ کریں اور آپ کو وہی لے آؤٹ مل جائے گا جو آپ نے یہاں بنایا تھا۔