سی ایس ایس کا استعمال کرتے ہوئے پیچیدہ ترتیب کیسے بنانا

Sep 12, 2025

کيسے

ویب کے لئے لے آؤٹ ہمیشہ محدود ہے، اس میں واقعی ایک ایسی شکل میں ظاہر کرنے کے لئے آسان مواد بنانے کے لئے واقعی کچھ بھی نہیں ہوا ہے جو احساس کرتا ہے.

واپس '90s جب ویب سب سے پہلے پکڑ لیا، ڈیزائنرز جو ایک گرڈ پر مواد نکالنے کے لئے استعمال کیا جاتا تھا، براؤزر میں ایک ہی نتیجہ حاصل کرنے کا واحد راستہ ملا تھا. ضم کرنے کے خلیات پیچیدہ ہیں ویب سائٹ کی ترتیب ، لیکن اس نے رسائی اور SEO کے ساتھ کام کیا. فاسٹ فارورڈ اور آج وہاں فلوٹ، لچکدار باکس اور اسی طرح کے مواد کے ساتھ مواد رکھنے کے تمام طریقوں ہیں.

CSS3 نے واقعی ویب فارورڈ کی صلاحیتوں کو دھکا دیا ہے اور 2014 سے وہاں موجود ہے سی ایس ایس گرڈ ترتیب . اس وقت اس میں 75 فی صد براؤزر کی حمایت ہے، لہذا یہ نقطہ نظر ہو رہا ہے جب یہ اس کا سنجیدہ غور کرنے کا وقت ہے. زرب کی بنیاد 6 فریم ورک بورڈ پر مل گیا ہے اور اس کی گرڈ کو اقتدار میں استعمال کر رہا ہے.

یہ سبق ایک میگزین طرز کی خصوصیت بنانے پر توجہ مرکوز کرے گا جو آپ کو کامل کرنے کے لۓ دکھایا جائے گا ذمہ دار ویب ڈیزائن درمیانے اور چھوٹے اسکرین کے سائز کے لئے.

یہاں سبق فائلیں ڈاؤن لوڈ کریں

01. شروع کرو

شروع فولڈر سے فائل 'grid1.html' کھولیں پروجیکٹ فائلوں . اس کے لئے ایچ ٹی ایم ایل ترتیب پانچ ڈوی ٹیگ ہے، صرف شے 1-5 کو سی ایس ایس کلاسوں کے طور پر نامزد کیا جاتا ہے. یہ گرڈ میں رکھی گئی مواد ہوگی. کنٹینر ریپنگ یہ گرڈ کی وضاحت کرے گا، جس میں چار کالم ہوں گے.

 & lt؛ ڈوی کلاس = "کنٹینر" اور جی ٹی؛
  & lt؛ div class = "item1" & gt؛ آئٹم 1 & lt؛ / div & gt؛
  & lt؛ div class = "item2" & gt؛ آئٹم 2 & lt؛ / div & gt؛
  & lt؛ div class = "item3" & gt؛ شے 3 اور ایل ٹی؛ / div & gt؛
  & lt؛ div class = "item4" & gt؛ آئٹم 4 اور ایل ٹی؛ / div & gt؛
  & lt؛ div class = "item5" & gt؛ آئٹم 5 & lt؛ / div & gt؛
& lt؛ / div & gt؛

02. گرڈ کے لئے سی ایس ایس چیک کریں

سر سیکشن میں دیکھ کر آپ دیکھ سکتے ہیں کہ 'کنٹینر' کو ایک گرڈ کے طور پر رکھا گیا ہے، قطاروں کے لئے آٹو اونچائی کے ساتھ، جبکہ کالم ہر سیٹ کے ساتھ براؤزر کے 25 فی صد کے ساتھ چار مقرر کیے جائیں گے. . اسے براؤزر میں چیک کریں اور آپ دیکھیں گے کہ ہر چیز کو خود بخود اگلے دستیاب گرڈ پوزیشن کو تفویض کیا جاتا ہے.

 .Container {
  ڈسپلے: گرڈ؛
  گرڈ ٹیمپلیٹ-قطار: آٹو؛
  گرڈ ٹیمپلیٹ کالم: دہرائیں (4، 25٪)؛ }

03. گرڈ پوزیشنوں کی وضاحت کریں

اب 'grid2.html' فائل پر نظر ڈالیں. یہ پہلی فائل کے طور پر ہی ہے، 'ITEM1' اور 'item2' کے علاوہ مخصوص عہدوں کو دیا جاتا ہے. سب سے پہلے قطار 1 میں پوزیشن میں ہے اور قطار سے پہلے ختم ہوتا ہے 2. کالم 1 میں شروع ہوتا ہے اور 3 پر ختم ہوتا ہے لہذا یہ دو کالموں کو پھیلاتا ہے. دوسرا کالم 3 میں شروع ہوتا ہے اور اگلے دو کالم لیتا ہے. باقی اشیاء اگلے دستیاب گرڈ سلاٹس کو بھرتے ہیں.

 .آپ 1 {
  گرڈ قطار شروع: 1؛
  گرڈ قطار - اختتام: 2؛
  گرڈ کالم شروع: 1؛
  گرڈ کالم - اختتام: 3؛
}
.item2 {
  گرڈ قطار شروع: 1؛
  گرڈ قطار - اختتام: 2؛
  گرڈ کالم شروع: 3؛
  گرڈ کالم - اختتام: 5؛
}

04. گرڈ سانچے کا استعمال کریں

'grid3.html' کھولیں اور ایچ ٹی ایم ایل کے جسم کو دیکھو. آپ دیکھیں گے کہ ہیڈر، سائڈبار، مین مواد سیکشن اور فوٹر کے ساتھ ایک ترتیب ہے. آپ مواد میں مزید متن شامل کرسکتے ہیں کہ یہ کیا ہوتا ہے جب یہ کیا ہوتا ہے. گرڈ ان حصوں کو ترتیب میں بنانے کے لئے ایک ٹیمپلیٹ کی خصوصیت کا استعمال کرے گا.

 & lt؛ ڈوی کلاس = "کنٹینر" اور جی ٹی؛
  & lt؛ div class = "ہیڈر" اور GT؛ ہیڈر اور ایل ٹی؛ / ڈی وی اور جی ٹی؛
  & lt؛ div class = "سائڈبار" اور GT؛ سائڈبار اور ایل ٹی؛ / ڈوی اور جی ٹی؛
  & lt؛ div class = "مواد" اور GT؛ مواد & lt؛ / div & gt؛
  & lt؛ div class = "فوٹر" اور GT؛ فوٹر اور ایل ٹی؛ / div & gt؛
& lt؛ / div & gt؛

05. ٹیمپلیٹ کی وضاحت کریں

کنٹینر کے لئے سی ایس ایس کو دیکھو. یہ ایک گرڈ کے طور پر بیان کیا جاتا ہے. سب سے اوپر قطار 200px اعلی ہو گی، وسط آٹو سائز ہو گی اور آخری قطار 100px اعلی ہوگی. کالموں کو 33 فی صد وسیع اور باقی خود بخود مقرر کیا جاتا ہے. ٹیمپلیٹ کا کہنا ہے کہ ہیڈر دونوں کالم بھریں گے. اگلے قطار پہلی کالم اور اگلے میں مواد میں سائڈبار ہو گی. فوٹر دونوں میں جاتا ہے.

 .Container {
  ڈسپلے: گرڈ؛
  گرڈ ٹیمپلیٹ-قطار: 200px آٹو 100px؛
  گرڈ ٹیمپلیٹ-کالم: 33٪ آٹو؛
  گرڈ ٹیمپلیٹ - علاقوں:
  "ہیڈر ہیڈر"
  "سائڈبار مواد"
  "فوٹر فوٹر"؛ }

06. کلاس میں ٹیمپلیٹ کو لنک کریں

ٹیمپلیٹ کو کلاس سے منسلک کرنے کے لئے، یہاں دکھایا گیا کوڈ اس کی وضاحت کرتا ہے. ہر گرڈ علاقے کا نام دیا جاتا ہے اور لنک پیدا ہوتا ہے. مواد یہاں نہیں دکھایا گیا ہے، لیکن یہ 'grid3.html' دستاویز میں ہے. گرڈ کی ترتیب کو دیکھنے کے لئے براؤزر میں اس کو دیکھو. کیونکہ دو کالم کی وضاحت کی جاتی ہے، ٹیمپلیٹ ہر ایک خراب شدہ کاموں میں دو علاقوں کی ضرورت ہے.

. ہیڈر {
  گرڈ علاقے: ہیڈر؛
}
. سائڈبار {
  گرڈ-علاقے: سائڈبار؛
}
.footer {
  گرڈ علاقے: فوٹر؛ }

07. اسے قبول کریں

'grid3.html' ذمہ دار بنانے کے لئے، ایک میڈیا سوال داخل کیا جاتا ہے اور سب سے اوپر قطار 200 فی صد میں رکھا جاتا ہے، جبکہ باقی قطار خود بخود سائز کی جائے گی. صرف ایک کالم ہے، مکمل چوڑائی، لہذا ٹیمپلیٹ میں ترتیب کی وضاحت کرنے کے لئے ہر ایک خراب کما میں ایک لفظ ہے. یہ آسانی سے کسی بھی ایچ ٹی ایم ایل منتقل کرنے کے بغیر دوبارہ ترتیب دیا جا سکتا ہے.

 media سکرین اور (زیادہ سے زیادہ چوڑائی: 699px) {
  .container {
  ڈسپلے: گرڈ؛
  گرڈ ٹیمپلیٹ-قطار: 200px آٹو؛
  گرڈ ٹیمپلیٹ-کالم: 100٪؛
  گرڈ ٹیمپلیٹ-علاقوں: "ہیڈر" "سائڈبار" "مواد" "فوٹر"؛
  }
}

08. ایک حقیقی ترتیب پر کام

اب 'index.html' کھولیں - مواد کے لئے تمام ایچ ٹی ایم ایل پہلے سے ہی تخلیق کیا گیا ہے، جیسا کہ ڈیزائن عناصر کے لئے کچھ سی ایس ایس ہے. اس گرڈ کو سر سیکشن میں سٹائل ٹیگ میں شامل کریں. ایسا کرنا ہر سیکشن کے لئے ٹیمپلیٹ کے ساتھ تین کالم گرڈ بناتا ہے. خالی گرڈ حصوں کے لئے مکمل سٹاپ نوٹ کریں.

 .Container1 {
  چوڑائی: 80٪؛
  مارجن: 0 آٹو؛
  ڈسپلے: گرڈ؛
  گرڈ ٹیمپلیٹ-قطار: آٹو؛
  گرڈ ٹیمپلیٹ-کالم: 33.3٪ 33.3٪ آٹو؛
  گرڈ ٹیمپلیٹ - علاقوں: "ہیڈر ہیڈر ہیڈر ہیڈر" ". اسٹینڈفسٹ اسٹینڈفسٹ" ". آرٹیکل 1" "فوکس Pullquote Pullquote" "آرٹیکل 2 آرٹیکل 2"؛
}

09. ٹیمپلیٹ لنک کریں

پچھلے مرحلے کے ساتھ، یہ سانچے کے ساتھ ہیڈر سے منسلک ہے. ہیڈر کو بتایا گیا ہے کہ گرڈ کے تمام تین کالموں کو دور کرنے کے لئے، پھر موقف دو کالم لینے کے لئے مقرر کیا جاتا ہے اور بائیں طرف ایک خالی کالم ہے. اگر آپ براؤزر کو چیک کرتے ہیں تو، یہ کالم بھرا ہوا ہے کیونکہ باقی مواد اگلے دستیاب جگہ کو خود بخود کرتی ہے - یہ ایسا نہیں کرے گا جب یہ سب سیٹ اپ ہے.

. ہیڈر {
  گرڈ علاقے: ہیڈر؛
}
. اسٹینڈفسٹسٹ {
  گرڈ علاقے: اسٹینڈور؛
}

10. اگلے علاقوں میں شامل کریں

اب پہلا مضمون، پل اقتباس اور توجہ مرکوز کی تصویر ڈیزائن میں رکھی جاتی ہے. ھیںچو اقتباس اور تصویر ایک ہی قطار میں طرف کی طرف سے ہیں. اس مرحلے میں، آرٹیکل 2 کو نہیں رکھا گیا ہے لہذا یہ گرڈ پر پہلی دستیاب جگہ لے رہی ہے جو اس کے آگے آگے ہے.

 .article1 {
  گرڈ-علاقہ: آرٹیکل 1؛
}
pullquote {
  گرڈ علاقے: Pullquote؛
}
.cocus {
  گرڈ علاقے: فوکس؛
  متن سیدھا: مرکز؛ }

11. پہلی گرڈ ختم کرو

دوسرے آرٹیکل کے سی ایس ایس کو شامل کرنے میں سب سے پہلے گرڈ کو صحیح طریقے سے رکھا جائے گا. براؤزر میں اس کو دیکھ کر دکھایا جائے گا کہ ترتیب پس منظر کی تصویر کے ساتھ کام کرتا ہے اور میگزین میں دیکھے جانے والی قسم کی ترتیب پیدا کرتا ہے، جہاں ڈیزائنر ایک بڑی پس منظر کی تصویر کے ارد گرد کام کرتا ہے.

 .article2 {
    گرڈ علاقے: آرٹیکل 2؛
    کالم خلا: 65px؛
    کالم شمار: 2؛
}

12. ایک سفید پس منظر شامل کریں

دوسری گرڈ شروع کرنے سے پہلے، آپ حیران ہوسکتے ہیں کہ دو گرڈ کی ضرورت کیوں ہے. وجہ یہ ہے کہ یہ گرڈ ایک سفید مکمل چوڑائی پس منظر کے پاس جا رہا ہے لہذا یہ سی ایس ایس دوسری گرڈ لپیٹ کرے گا. یہ اس سیکشن کو ڈیزائن میں دوسرا صفحہ کا احساس دینا ہے.

 .WHITEBG {
    Padding: 100px 0؛
    پس منظر کا رنگ: #ddd؛
}

13. ایک دوسری گرڈ بنائیں

دوسرا گرڈ سب سے پہلے سے آسان ہے. قطاروں پر خود کار طریقے سے اونچائی کے ساتھ تین کالم ہیں. مواد ہر ایک کالم کو بھرنے کے لئے جا رہا ہے لہذا ٹیمپلیٹ کے علاقوں کی وضاحت کرنے کی کوئی ضرورت نہیں ہے. تاہم، جب ٹیبلٹ ڈیزائن شامل کیا جاتا ہے تو، یہ دو کالموں کو سوئچ کرنے کی ضرورت ہے، لہذا ریفلو کی ضرورت ہوتی ہے اور نام اہم ہو جائیں گے.

 .Container2 {
    چوڑائی: 80٪؛
    مارجن: 0 آٹو؛
    ڈسپلے: گرڈ؛
    گرڈ ٹیمپلیٹ-قطار: آٹو؛
    گرڈ ٹیمپلیٹ-کالم: 33.3٪ 33.3٪ آٹو؛
    گرڈ ٹیمپلیٹ - علاقوں: "IMG1 IMG2 آرٹیکل 3"؛
}

14. کالم شامل کریں

دوسری گرڈ میں سی ایس ایس کی کلاسوں میں سے ہر ایک کو متعلقہ کالم کے ساتھ منسلک کرنے کے لئے کہا جاتا ہے، جیسا کہ گرڈ ٹیمپلیٹ میں بیان کیا گیا ہے. آرٹیکل ٹیکسٹ کا رنگ صرف اس حصے کے لائٹر پس منظر کے خلاف کھڑا کرنے کے لئے تبدیل کر دیا گیا ہے. مکمل کرنے کے لئے صرف فوٹر کے ساتھ، میگزین طرز ترتیب کے ڈیزائن تقریبا جگہ میں ہے.

 .img1 {
  گرڈ علاقے: IMG1؛
}
.img2 {
    گرڈ علاقے: IMG2؛
}
.article3 {
  گرڈ علاقے: آرٹیکل 3؛
  رنگ: # 333؛
}

15. صفحے کے پاؤں کامل

اس صفحے کو ختم کرنا اسکرین میں مکمل چوڑائی ڈیوڈ کرے گا، جو ایک سیاہ رنگ سے بھرا ہوا جائے گا اور متن صرف مرکز ہے. یہ ڈیزائن کے ڈیسک ٹاپ ورژن کو مکمل کرتا ہے، لیکن 1200px وسیع سے نیچے اسکرین کو نیچے منتقل کریں اور سائٹ توڑنے کے لئے شروع ہوتا ہے.

 .فوٹر {
    پس منظر کا رنگ: # 000؛
    رنگ: # 999؛
    متن سیدھا: مرکز؛
    Padding: 50px 20px 100px؛
}

16. درمیانے سکرین ڈیزائن کے لئے ایڈجسٹ کریں

ڈیزائن کے بعد ایک میڈیا سوال یہاں داخل کیا جاتا ہے جب براؤزر کی چوڑائی 1200px سے کم ہے. 17 اور 18 کے لئے کوڈ بریکٹ کے اندر اندر رکھا جائے گا جہاں تبصرہ ہے. یہ گرڈ کی ترتیب کی ساخت دونوں کو تبدیل کرنے کا ایک کیس ہوگا.

 media سکرین اور (زیادہ سے زیادہ چوڑائی: 1200px) {
  / * کوڈ یہاں * /
}

17. پہلی گرڈ کو ریفلو کریں

پہلی گرڈ اب براؤزر کی مکمل چوڑائی کو بھرنے کے لئے مقرر کیا جاتا ہے. مضامین سوئچنگ کے اطراف کے ساتھ، سیکشن کے حکم میں ٹیمپلیٹ میں رکھا جاتا ہے، کیونکہ اس اسکرین کے سائز میں اس پس منظر کی تصویر کے ساتھ بہتر فٹ بیٹھتا ہے.

 .Container1 {
  چوڑائی: 100٪؛
  گرڈ ٹیمپلیٹ-قطار: آٹو؛
  گرڈ ٹیمپلیٹ-کالم: 50٪ 50٪؛
  گرڈ ٹیمپلیٹ-علاقوں: "ہیڈر ہیڈر" "اسٹینڈفسٹ اسٹینڈفسٹ" "آرٹیکل 1." "Pullquote Pullquote" "آرٹیکل 2 فوکس"؛
  }
.article2 {
  کالم شمار: 1؛
  }

18. آپ کی ترتیب کی جانچ

براؤزر کی مکمل چوڑائی لینے اور دو کالموں کو شامل کرنے کے لئے دوسری گرڈ بھی شامل ہے. تصاویر متن کے اوپر قطار پر طرف کی طرف سے طرف رکھی جاتی ہیں تاکہ یہ ڈسپلے پر صاف طور پر فٹ ہوجائے. آپ براؤزر میں اس ترتیب کو 1200px کی چوڑائی کے نیچے اپنے براؤزر کا سائز تبدیل کرکے براؤزر میں ٹیسٹ کر سکتے ہیں.

 .Container2 {
  چوڑائی: 100٪؛
  مارجن: 0 آٹو؛
  گرڈ ٹیمپلیٹ-قطار: آٹو؛
  گرڈ ٹیمپلیٹ-کالم: 50٪ 50٪؛
  گرڈ ٹیمپلیٹ - علاقوں: "IMG1 IMG2" "آرٹیکل 3 آرٹیکل 3"؛
}

19. موبائل کے لئے ڈیزائن ڈیزائن

کسی بھی براؤزر جس میں 769px سے بھی کم کی چوڑائی ہے وہ کوڈ کو حتمی مراحل میں شامل کرے گا. ہم سب کو یہاں کرنے کی ضرورت ہے یہ یقینی بناتا ہے کہ گرڈ میں سے ہر ایک ایک کالم ترتیب ہے تاکہ مواد کو چھوٹے جگہ کے اندر مناسب طریقے سے دیکھا جا سکے.

 media سکرین اور (زیادہ سے زیادہ چوڑائی: 768px) {
  / * حتمی مرحلے کوڈ یہاں * /
}

20. ایک کالم گرڈ چیک کریں

اب پہلی گرڈ براؤزر کی چوڑائی کے 100 فی صد کے ایک کالم میں مقرر کیا جاتا ہے اور سیکشن کے حکم کو ٹیمپلیٹ کے علاقوں میں شامل کیا جاتا ہے. یہ دیکھنے کے لئے چیک کریں کہ صفحے کا پہلا حصہ موبائل اسکرین پر کام کر رہا ہے.

 .Container1 {
  چوڑائی: 100٪؛
  گرڈ ٹیمپلیٹ-قطار: آٹو؛
  گرڈ ٹیمپلیٹ-کالم: 100٪؛
  گرڈ ٹیمپلیٹ-علاقوں: "ہیڈر" "اسٹینڈفیر" "آرٹیکل 1" "Pullquote" "فوکس" "آرٹیکل 2"؛
}

21. ترتیب ختم

یہاں، ایک کالم کو بھرنے کے لئے دوسرا گرڈ بھی بنایا گیا ہے اور حصوں کی ترتیب کی وضاحت کی گئی ہے. اب مکمل ڈیزائن کو محفوظ کریں اور مختلف سائز کی سکرینوں میں اسے سی ایس ایس گرڈ کی مکمل ترتیب کی صلاحیت کو دیکھنے کے لئے دیکھیں اور مختلف چوڑائیوں کے لئے مواد کو دوبارہ ترتیب دینے کے لئے کتنا آسان تھا.

 .Container2 {
  چوڑائی: 100٪؛
  مارجن: 0 آٹو؛
  گرڈ ٹیمپلیٹ-قطار: آٹو؛
  گرڈ ٹیمپلیٹ-کالم: 100٪؛
  گرڈ ٹیمپلیٹ - علاقوں: "IMG1" "IMG2" "آرٹیکل 3"؛
}

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین ویب ڈیزائنر میں شائع کیا گیا تھا. خریدنے مسئلہ 271. یا سبسکرائب .

متعلقہ مضامین:

سپر تیز رفتار سی ایس ایس کے لئے 5 تجاویز
سی ایس ایس ڈسپلے پراپرٹی کو سمجھنے
سی ایس ایس کے سائز کے ساتھ ایک پرامڈ ترتیب کیسے بنائیں

سی ایس ایس کا استعمال کرتے ہوئے پیچیدہ ترتیب کیسے بنانا

01. شروع کرو

02. گرڈ کے لئے سی ایس ایس چیک کریں

03. گرڈ پوزیشنوں کی وضاحت کریں

04. گرڈ سانچے کا استعمال کریں

05. ٹیمپلیٹ کی وضاحت کریں

06. کلاس میں ٹیمپلیٹ کو لنک کریں

07. اسے قبول کریں

08. ایک حقیقی ترتیب پر کام

09. ٹیمپلیٹ لنک کریں

10. اگلے علاقوں میں شامل کریں

11. پہلی گرڈ ختم کرو

12. ایک سفید پس منظر شامل کریں

13. ایک دوسری گرڈ بنائیں

14. کالم شامل کریں

15. صفحے کے پاؤں کامل

16. درمیانے سکرین ڈیزائن کے لئے ایڈجسٹ کریں

17. پہلی گرڈ کو ریفلو کریں

18. آپ کی ترتیب کی جانچ

19. موبائل کے لئے ڈیزائن ڈیزائن

20. ایک کالم گرڈ چیک کریں

21. ترتیب ختم

کيسے - انتہائی مشہور مضامین

کس طرح گردن اور کندھوں کو ڈراؤ

گلاب کیسے بنانا: ابتدائی اور اعلی درجے کی تجاویز

ایک سپر حقیقت پسندانہ فنتاسی مخلوق کیسے بنائیں

Redux Thunk کے ساتھ شروع کریں

فوٹوشاپ میں Colourise Greyscale کام

ایک مستند منگا مزاحیہ پٹی کیسے بنائیں

دولہا ایک غیر معمولی طور پر پیارے مخلوق

ڈیزائن اور مواد سپرنٹ چلانے کے لئے سیکھیں

اقسام