ITDCFeD – Week #14 | CSS Subgrid + Modern Layouts
Live CodePen: https://codepen.io/mmshahid73/pen/GgjdGVK
تعارف
Week #14 میں ہم CSS Subgrid اور Container Queries کو استعمال کرتے ہوئے ایک modern responsive layout بنائیں گے۔ اس lesson میں nested components کو parent grid tracks کے ساتھ align کرنا، component-level responsiveness، اور fallback strategy سکھائی جائے گی ۔
لیکچر کا مقصد
اس lecture کے بعد students:
Subgrid کا concept سمجھ سکیں گے.
Parent grid اور child grid کا فرق جان سکیں گے.
Container queries سے component-based responsiveness بنا سکیں گے.
Browser support کے لیے
@supportsfallback استعمال کر سکیں گے ۔
Concept Overview
Subgrid کا فائدہ یہ ہے کہ nested grid parent کی columns یا rows کو inherit کر لیتا ہے، جس سے alignment زیادہ clean اور consistent ہو جاتی ہے ۔
Container queries media queries سے different ہیں، کیونکہ یہ پوری screen کے بجائے component کی available width کے مطابق style apply کرتی ہیں ۔
Code Walkthrough
1) Layout Structure
ہم نے page کو hero, features, اور project showcase sections میں divide کیا ہے تاکہ learners کو practical structure سمجھ آئے۔
2) Subgrid Usage
@supports (grid-template-columns: subgrid) کے ذریعے modern browsers میں subgrid enable کیا گیا ہے، جبکہ unsupported browsers کے لیے normal grid fallback رکھا گیا ہے ۔
3) Container Queries
ہر .section کو container-type: inline-size دیا گیا ہے تاکہ اس کی width کی بنیاد پر cards کی layout adjust ہو سکے ۔
Teacher Notes
Subgrid کو “layout inheritance” کے انداز میں سمجھائیں۔
@supportsکو production safety net کے طور پر introduce کریں۔Container queries کو component-driven design کا modern approach بتائیں۔
Students کو real-world dashboard/portfolio examples دیں ۔
Student Assignment
ایک 3-card responsive layout بنائیں جس میں:
badge.
title.
description.
tags.
desktop پر 3 columns.
tablet پر 2 columns.
mobile پر 1 column.
subgrid fallback لازمی ہو ۔
Forum Post Title
ITDCFeD – Week #14 | CSS Subgrid + Container Queries + Modern Layouts
Closing Line
یہ lecture modern CSS architecture کی طرف ایک strong step ہے اور students کو advanced responsive design کی practical understanding دے گا ۔
کوئی تبصرے نہیں:
ایک تبصرہ شائع کریں