Review the grid container requirements and mockup on the left. Which markup should you use to define the grid container?

• لے آؤٹ کا تجزیہ: تصویر میں 5 مواد کے علاقے دکھائے گئے ہیں:
  • 1: لوگو اور صفحہ کا عنوان (heading)
  • 2: مینو (menu)
  • 3: مرکزی مواد کا علاقہ (content)
  • 4: اضافی مواد کا علاقہ (right)
  • 5: کاپی رائٹ اور رابطہ کی معلومات (contact)
• گرڈ کی ساخت: لے آؤٹ میں 3 قطاریں اور 3 کالم ہیں۔
  • پہلی قطار: heading تمام 3 کالموں پر پھیلا ہوا ہے۔
  • دوسری قطار: menu، content، اور right ہر ایک کالم پر قابض ہیں۔
  • تیسری قطار: contact تمام 3 کالموں پر پھیلا ہوا ہے۔
• grid-template-areas کا استعمال: گرڈ کے علاقوں کو ناموں سے ترتیب دینے کے لیے grid-template-areas پراپرٹی کا استعمال کیا جاتا ہے۔ ہر سٹرنگ ایک قطار کی نمائندگی کرتی ہے، اور سٹرنگ کے اندر کے نام کالموں میں علاقوں کی ترتیب کو ظاہر کرتے ہیں۔

آپشنز کا جائزہ:

• آپشن A: یہ grid-template-columns اور grid-template-rows کا استعمال کرتا ہے جو کالموں اور قطاروں کے سائز کی وضاحت کرتا ہے، لیکن نامزد علاقوں کی جگہ کا تعین نہیں کرتا۔ یہ غلط ہے۔
• آپشن B: یہ grid-template-areas کا استعمال کرتا ہے، لیکن ہر قطار میں 6 نام استعمال کرتا ہے، جو 3 کالموں کے لے آؤٹ سے مطابقت نہیں رکھتا۔ یہ غلط ہے۔
• آپشن C: یہ grid-template-areas کا صحیح طریقے سے استعمال کرتا ہے:
  • 'heading heading heading' - پہلی قطار کو صحیح طریقے سے بیان کرتا ہے، جہاں heading تینوں کالموں پر پھیلا ہوا ہے۔
  • 'menu content right' - دوسری قطار کو صحیح طریقے سے بیان کرتا ہے، جہاں menu، content، اور right ہر ایک کالم پر قابض ہیں۔
  • 'contact contact contact' - تیسری قطار کو صحیح طریقے سے بیان کرتا ہے، جہاں contact تینوں کالموں پر پھیلا ہوا ہے۔ یہ لے آؤٹ کی ضروریات اور تعریف شدہ گرڈ علاقوں سے بالکل میل کھاتا ہے۔

لہذا، آپشن C صحیح مارک اپ ہے۔

C

.grid-container {
  display: grid;
  grid-template-areas:
    'heading heading heading'
    'menu content right'
    'contact contact contact';
  grid-gap: 10px;
  background-color: orange;
  padding: 10px;
}

• جواب: آپشن C