ITDCFeD – Week #15 Container Queries کے ساتھ Responsive Components

 

ITDCFeD – Week #15

Container Queries کے ساتھ Responsive Components

آج کے لیکچر میں ہم Container Queries کو سمجھیں گے اور دیکھیں گے کہ یہ modern responsive design میں کیوں اتنے اہم ہیں۔
پہلے ہم media queries استعمال کرتے تھے جو پورے viewport کی width دیکھتی تھیں، لیکن container queries میں component اپنی parent container کی width کے مطابق اپنا layout خود adjust کرتا ہے۔
یہ approach خاص طور پر reusable cards، dashboard panels، اور modular UI components کے لیے بہت مفید ہے۔

---

Container Queries کیا ہیں؟

Container queries ایک ایسا CSS concept ہے جس میں آپ کسی component کو اس کے اپنے container کے سائز کے مطابق style دیتے ہیں۔
یعنی اگر card چھوٹی جگہ میں ہو تو وہ compact ہو جائے، اور اگر بڑی جگہ میں ہو تو وہ زیادہ wide اور detailed layout اختیار کر لے۔

سادہ مثال

اگر ایک ہی card کسی sidebar میں ہو اور دوسری جگہ main content area میں، تو دونوں کا layout مختلف ہو سکتا ہے۔
یہی container queries کی اصل طاقت ہے۔

---

Media Queries اور Container Queries میں فرق

Media Queries

Media queries browser window یا screen size کو دیکھتی ہیں۔
یعنی پورے viewport کی width کی بنیاد پر design change ہوتا ہے۔

Container Queries

Container queries کسی specific parent element کی width دیکھتی ہیں۔
یعنی component خود فیصلہ کرتا ہے کہ اسے کیسے دکھنا چاہیے۔

یہ فرق modern component-based design میں بہت اہم ہے، کیونکہ ایک ہی component مختلف جگہوں پر مختلف انداز سے استعمال ہو سکتا ہے۔

---

Lecture کا مقصد

اس لیکچر کے بعد آپ یہ سیکھ جائیں گے:

• Container queries کا basic concept۔

• container-type property کا استعمال۔

• @container rule کیسے لکھتے ہیں۔

• Responsive cards اور panels کیسے بناتے ہیں۔

• Modern layout میں component-level responsiveness کیسے implement کرتے ہیں۔

---

Code Structure

اس lecture میں ہم ایک responsive course card system اور ایک dashboard panel بنائیں گے۔
ہر component اپنی جگہ کی width کے مطابق layout change کرے گا۔

Example Layout

• Hero section

• Course cards

• Dashboard area

• Stats panel

• Responsive content block

Live CodePen: https://codepen.io/mmshahid73/pen/raMvraJ

Lecture کی وضاحت

اس code میں ہم نے سب سے پہلے ایک modern card layout بنایا ہے۔
ہر card اپنے content کے ساتھ clean spacing رکھتا ہے، اور جب container کی width کم ہوتی ہے تو card layout خود adjust ہو جاتا ہے۔

اہم CSS لائن:

css
.section{
  container-type:inline-size;
}

یہ لائن section کو container بنا دیتی ہے۔
اب ہم @container rules استعمال کر سکتے ہیں۔

مثال:

css
@container (max-width: 900px){
  .cards-shell{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

اس کا مطلب ہے کہ اگر section کی width 900px سے کم ہو جائے تو cards 3 کی بجائے 2 columns میں آ جائیں گے۔

---

Container Queries کیوں ضروری ہیں؟

آج کل websites اور apps reusable components پر بنائے جاتے ہیں۔
ایک ہی card کبھی sidebar میں ہوتا ہے، کبھی main section میں، اور کبھی modal میں۔
اگر ہر جگہ viewport based media queries استعمال کی جائیں تو layout inconsistent ہو جاتا ہے۔
Container queries اس مسئلے کا modern حل ہیں۔

---

اس لیکچر سے سیکھنے والی باتیں

• Responsive design صرف screen size پر depend نہیں کرتی۔

• Component کی اپنی width بھی اہم ہوتی ہے۔

• Container queries modern CSS کا ضروری حصہ ہیں۔

• Dashboard, cards, panels, اور reusable UI blocks میں یہ بہت effective ہیں۔

---

Student Assignment

اس لیکچر کا ٹاسک:

1. اوپر والے layout میں 3 cards بنائیں۔

2. ہر card میں badge یا number add کریں۔

3. @container کے ذریعے 3 → 2 → 1 column behavior بنائیں۔

4. Dashboard panel کو بھی responsive بنائیں۔

5. Card design میں اپنی choice کے رنگ اور icons شامل کریں۔

---

اختتامی بات

یہ lecture students کو یہ سمجھاتا ہے کہ modern responsive design صرف media queries تک محدود نہیں رہی۔
اب ہمیں component-based responsiveness بھی سمجھنی ہے، اور container queries اسی direction میں ایک بہت اہم concept ہیں۔