CSS گرڈ پلے گراؤنڈ

CSS گرڈ پلے گراؤنڈ کے بارے میں

CSS گرڈ پلے گراؤنڈ حقیقی گرڈ لے آؤٹس کو بصری انداز میں ترتیب دیتا ہے۔ کالم اور رو ٹریکس شامل یا ہٹا کر grid-template-columns اور grid-template-rows کو شکل دیں، کالم اور رو کے درمیان فاصلہ (gap) سیٹ کریں، اور تمام چار ایلائنمنٹ خصوصیات — justify-items، align-items، justify-content اور align-content — کو ایڈجسٹ کریں جبکہ پیش منظر ہر تبدیلی کو فوری طور پر ظاہر کرتا ہے۔

آئٹم پلیسمنٹ وہ جگہ ہے جہاں گرڈز طاقتور ثابت ہوتے ہیں: آئٹمز شامل کریں، پیش منظر میں کسی ایک پر کلک کر کے اسے منتخب کریں، اور اسے column start، column span، row start اور row span کے ذریعے پوزیشن دیں۔ یہی وہ طریقہ ہے جس سے سائیڈ بارز، ہیڈرز اور فیچر سیلز کئی ٹریکس تک پھیلتے ہیں — یہی تکنیک تقریباً ہر حقیقی گرڈ لے آؤٹ کے پیچھے کارفرما ہوتی ہے۔

تین پری سیٹس — holy grail، dashboard اور gallery — کلاسک صفحہ ڈھانچے لوڈ کرتے ہیں جنہیں آپ کھول کر سمجھ سکتے ہیں اور اپنی ضرورت کے مطابق ڈھال سکتے ہیں۔ جب لے آؤٹ درست لگے تو تیار شدہ CSS کاپی کر لیں، جس میں مکمل گرڈ کنٹینر رولز اور ہر آئٹم کی پلیسمنٹ شامل ہوتی ہے۔

CSS گرڈ پلے گراؤنڈ استعمال کرنے کا طریقہ

1. گرڈ ٹیمپلیٹ متعین کرنے کے لیے کالم اور رو ٹریکس شامل یا ہٹائیں۔
2. کالم گیپ اور رو گیپ سیٹ کریں۔
3. ایلائنمنٹ کنٹرولز ایڈجسٹ کریں: justify-items، align-items، justify-content اور align-content۔
4. آئٹمز شامل کریں، پیش منظر میں کسی ایک پر کلک کریں، اور اسے پوزیشن دینے کے لیے اس کا کالم/رو start اور span سیٹ کریں۔
5. کلاسک لے آؤٹ سمجھنے کے لیے holy grail، dashboard یا gallery پری سیٹ لوڈ کریں۔
6. تیار شدہ CSS اپنی اسٹائل شیٹ میں کاپی کریں۔

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