سی ایس ایس گرڈ کے مضمر گرڈ اور آٹو پلیسمنٹ پاورز کو تلاش کرنا

CSS گرڈ کے ساتھ کام کرتے وقت، سب سے پہلے سیٹ کرنا ہے۔ display: grid اس عنصر پر جسے ہم ایک گرڈ کنٹینر بننا چاہتے ہیں۔ پھر ہم واضح طور پر کے مجموعہ کا استعمال کرتے ہوئے گرڈ کی وضاحت کرتے ہیں۔ grid-template-columns, grid-template-rows، اور grid-template-areas. اور وہاں سے، اگلا مرحلہ اشیاء کو گرڈ کے اندر رکھنا ہے۔

یہ کلاسک نقطہ نظر ہے جسے استعمال کیا جانا چاہئے اور میں اس کی سفارش بھی کرتا ہوں۔ تاہم، گرڈ بنانے کے لیے ایک اور طریقہ ہے۔ بغیر کسی واضح تعریف کے. ہم اسے کہتے ہیں مضمر گرڈ.

"واضح، مضمر؟ یہاں کیا ہو رہا ہے؟"

عجیب شرائط، ٹھیک ہے؟ Manuel Matuzovic پہلے ہی ہے ایک اچھی وضاحت ہم سی ایس ایس گرڈ میں "مضمون" اور "واضح" کے ذریعہ کیا کرسکتے ہیں، لیکن آئیے براہ راست اس میں کھودیں la sاعانت کہتے ہیں:

۔ grid-template-rows, grid-template-columns، اور grid-template-areas خصوصیات ٹریکس کی ایک مقررہ تعداد کی وضاحت کرتی ہے جو بنتی ہے۔ واضح گرڈ. جب گرڈ آئٹمز کو ان حدود سے باہر رکھا جاتا ہے، تو گرڈ کنٹینر گرڈ میں مضمر گرڈ لائنوں کو شامل کر کے ضمنی گرڈ ٹریک تیار کرتا ہے۔ یہ لائنیں واضح گرڈ فارم کے ساتھ مل کر مضمر گرڈ.

لہذا، سادہ انگریزی میں، براؤزر خود بخود اضافی قطاریں اور کالم تیار کرتا ہے اگر کوئی عنصر متعین گرڈ سے باہر رکھا جائے۔

آٹو پلیسمنٹ کے بارے میں کیا خیال ہے؟

مضمر گرڈ کے تصور کی طرح، خودکار جگہ کا تعین براؤزر کی یہ صلاحیت ہے کہ وہ اشیاء کو خود بخود گرڈ کے اندر رکھ سکتا ہے۔ ہمیں ہمیشہ ہر چیز کی پوزیشن دینے کی ضرورت نہیں ہے۔

مختلف استعمال کے معاملات کے ذریعے، ہم یہ دیکھنے جا رہے ہیں کہ اس طرح کی خصوصیات کوڈ کی چند لائنوں کے ساتھ پیچیدہ اور متحرک گرڈ بنانے میں ہماری مدد کیسے کر سکتی ہے۔

متحرک سائڈبار

یہاں، ہمارے پاس تین مختلف لے آؤٹ ہیں لیکن ہمارے پاس صرف ایک گرڈ کنفیگریشن ہے جو ان سب کے لیے کام کرتی ہے۔

main {
  display: grid;
  grid-template-columns: 1fr;
}

صرف ایک کالم تمام خالی جگہ لے رہا ہے۔ یہ ہمارا "واضح" گرڈ ہے۔ یہ میں ایک گرڈ آئٹم کو فٹ کرنے کے لیے ترتیب دیا گیا ہے۔ main گرڈ کنٹینر. بس۔ ایک کالم اور ایک قطار:

لیکن کیا ہوگا اگر ہم نے وہاں ایک اور عنصر کو چھوڑنے کا فیصلہ کیا، ایک کہنا aside (ہماری متحرک سائڈبار)۔ جیسا کہ اس کی فی الحال (اور واضح طور پر) وضاحت کی گئی ہے، ہمارے گرڈ کو اس عنصر کے لیے جگہ تلاش کرنے کے لیے خود بخود ایڈجسٹ کرنا پڑے گا۔ اور اگر ہم اپنے CSS کے ساتھ اور کچھ نہیں کرتے ہیں، تو یہ ہے جو DevTools ہمیں بتاتا ہے کہ ہو رہا ہے۔

ہم منتقل کر سکتے ہیں <aside> کے ساتھ ایک کالم پر <section>:

aside {
  grid-column-start: 2;
}

اور ڈیو ٹولز ہمیں اب یہ بتاتا ہے:

ہم اپنا عنصر دوسرے کالم میں رکھتے ہیں لیکن… ہمارے پاس دوسرا کالم نہیں ہے۔ عجیب، ٹھیک ہے؟ ہم نے کبھی بھی دوسرے کالم کا اعلان نہیں کیا۔ <main> گرڈ کنٹینر، لیکن براؤزر نے ہمارے لیے ایک بنایا! یہ تصریح کا کلیدی حصہ ہے جسے ہم نے دیکھا:

جب گرڈ آئٹمز کو ان حدود سے باہر رکھا جاتا ہے، تو گرڈ کنٹینر گرڈ میں مضمر گرڈ لائنوں کو شامل کر کے ضمنی گرڈ ٹریک تیار کرتا ہے۔

یہ طاقتور خصوصیت ہمیں متحرک لے آؤٹ رکھنے کی اجازت دیتی ہے۔ اگر ہمارے پاس صرف ہے۔ <section> عنصر، ہمیں صرف ایک کالم ملتا ہے۔ لیکن اگر ہم ایک کا اضافہ کرتے ہیں۔ <aside> مرکب میں عنصر، اس پر مشتمل ایک اضافی کالم بنایا جاتا ہے۔

ہم رکھ سکتے ہیں <aside> اس سے پہلے کہ <section> اس کے بجائے اس طرح:

aside {
  grid-column-end: -2;
} 

یہ پچھلے کوڈ کے برعکس گرڈ کے شروع میں مضمر کالم بناتا ہے جو آخر میں مضمر کالم رکھتا ہے۔

کا استعمال کرتے ہوئے ہم وہی کام زیادہ آسانی سے کر سکتے ہیں۔ grid-auto-flow a میں بہنے کے لیے کسی بھی اور تمام مضمر پٹریوں کو سیٹ کرنے کی خاصیت column سمت:

اب بتانے کی ضرورت نہیں۔ grid-column-start رکھنے کے لئے <aside> عنصر کے دائیں طرف <section>! درحقیقت، کوئی بھی دوسری گرڈ آئٹم جسے ہم کسی بھی وقت وہاں پھینکنے کا فیصلہ کرتے ہیں اب ایک کالم کی سمت میں بہہ جائے گا، ہر ایک کو اس کے اپنے مضمر گرڈ ٹریکس میں رکھا گیا ہے۔ ان حالات کے لیے بہترین ہے جہاں گرڈ میں آئٹمز کی تعداد پہلے سے معلوم نہیں ہوتی ہے!

اس نے کہا، ہمیں اب بھی ضرورت ہے۔ grid-column-end اگر ہم اسے اس کے بائیں کالم میں رکھنا چاہتے ہیں کیونکہ، دوسری صورت میں، <aside> واضح کالم پر قبضہ کرے گا جو بدلے میں، کو آگے بڑھاتا ہے۔ <section> واضح گرڈ سے باہر ہے اور اسے مضمر کالم لینے پر مجبور کرتا ہے۔

میں جانتا ہوں میں جانتا ہوں. یہ تھوڑا سا الجھا ہوا ہے۔ یہاں ایک اور مثال ہے جس کا استعمال ہم اس چھوٹی سی بات کو بہتر طور پر سمجھنے کے لیے کر سکتے ہیں:

پہلی مثال میں، ہم نے کسی جگہ کا تعین نہیں کیا۔ اس صورت میں، براؤزر پہلے جگہ دے گا۔ <aside> واضح کالم میں عنصر کیونکہ یہ DOM میں پہلے آتا ہے۔ دی <section>اس دوران، براؤزر خود بخود (یا واضح طور پر) ہمارے لیے تخلیق کردہ گرڈ کالم میں خود بخود رکھ دیا جاتا ہے۔

دوسری مثال میں، ہم نے سیٹ کیا <aside> واضح گرڈ سے باہر عنصر:

aside {
  grid-column-end: -2;
}

اب اس سے کوئی فرق نہیں پڑتا <aside> HTML میں پہلے آتا ہے۔ دوبارہ تفویض کرکے <aside> کہیں اور، ہم نے بنایا ہے۔ <section> واضح کالم لینے کے لیے دستیاب عنصر۔

تصویری گرڈ

آئیے تصاویر کے گرڈ کے ساتھ کچھ مختلف کرنے کی کوشش کریں جہاں ہمارے پاس ایک بڑی تصویر اور اس کے ساتھ (یا اس کے نیچے) چند تھمب نیلز ہوں۔

ہمارے پاس دو گرڈ کنفیگریشن ہیں۔ لیکن اندازہ لگائیں کیا؟ میں کسی بھی گرڈ کی وضاحت نہیں کر رہا ہوں! میں صرف یہ کر رہا ہوں:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

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

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

رکو! نہیں ہے۔ grid-area وہ پراپرٹی جسے ہم بیان کرنے کے لیے استعمال کرتے ہیں۔ نامزد علاقوں اس کے بجائے کہ عناصر گرڈ پر کہاں شروع اور ختم ہوتے ہیں؟

ہاں، لیکن یہ اور بھی کرتا ہے۔ ہم اس کے بارے میں بہت کچھ لکھ سکتے ہیں۔ grid-area، لیکن اس خاص معاملے میں:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

شارٹ ہینڈ ورژن کو بڑھانے کے لیے اوپن ڈیو ٹولز کو کریک کرتے وقت ہم وہی چیز دیکھ سکتے ہیں:

اس کا مطلب یہ ہے کہ گرڈ میں تصویر کے پہلے عنصر کو پھیلانے کی ضرورت ہے۔ تین کالم اور تین قطاریں. لیکن چونکہ ہم نے کسی کالم یا قطار کی وضاحت نہیں کی، براؤزر ہمارے لیے کرتا ہے۔

ہم نے بنیادی طور پر 3⨉3 گرڈ لینے کے لیے HTML میں پہلی تصویر رکھی ہے۔ اس کا مطلب یہ ہے کہ کوئی بھی دوسری تصاویر انہی تین کالموں میں خود بخود رکھ دی جائیں گی، بغیر کچھ نیا بتانے کی ضرورت ہے۔

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

یہ سب سی ایس ایس کی ایک لائن سے! یہ "مضمون" گرڈ اور آٹو پلیسمنٹ کی طاقت ہے۔

اس ڈیمو میں دوسری گرڈ کنفیگریشن کے لیے، میں نے جو کچھ کیا ہے وہ یہ ہے کہ استعمال کرتے ہوئے خودکار بہاؤ کی سمت کو تبدیل کرنا ہے۔ grid-auto-flow: column اسی طرح جب ہم نے پہلے کیا تھا۔ <aside> a کے آگے عنصر <section>. یہ براؤزر کو ایک بنانے پر مجبور کرتا ہے۔ چوتھا کالم یہ باقی تصاویر رکھنے کے لیے استعمال کر سکتا ہے۔ اور چونکہ ہمارے پاس تین قطاریں ہیں، باقی امیجز اسی عمودی کالم کے اندر رکھی جاتی ہیں۔

ہمیں تصاویر میں کچھ خصوصیات شامل کرنے کی ضرورت ہے تاکہ یہ یقینی بنایا جا سکے کہ وہ گرڈ کے اندر بغیر کسی اوور فلو کے اچھی طرح سے فٹ ہیں:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

اور یقیناً، ہم ایک قدر کو ایڈجسٹ کرکے مزید تصاویر پر غور کرنے کے لیے آسانی سے گرڈ کو اپ ڈیٹ کر سکتے ہیں۔ یہ ہو گا 3 بڑی تصویر کے انداز میں۔ ہمارے پاس یہ ہے:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

لیکن ہم صرف اس میں تبدیل کرکے چوتھا کالم شامل کرسکتے ہیں۔ 4 اس کے بجائے:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

اس سے بھی بہتر: آئیے اسے ایک حسب ضرورت پراپرٹی کے طور پر ترتیب دیں تاکہ چیزوں کو اپ ڈیٹ کرنا اور بھی آسان ہو۔

متحرک لے آؤٹ

سائڈبار کے ساتھ پہلا استعمال کیس ہماری پہلی متحرک ترتیب تھی۔ اب ہم مزید پیچیدہ لے آؤٹس سے نمٹیں گے جہاں عناصر کی تعداد گرڈ کی ترتیب کا تعین کرے گی۔

اس مثال میں، ہمارے پاس ایک سے چار عناصر کہیں بھی ہو سکتے ہیں جہاں گرڈ اس طریقے سے ایڈجسٹ ہو جاتا ہے جو عناصر کی تعداد کو اچھی طرح سے فٹ بیٹھتا ہے بغیر کسی عجیب و غریب خلا یا خالی جگہوں کو چھوڑے۔

جب ہمارے پاس ایک عنصر ہوتا ہے تو ہم کچھ نہیں کرتے۔ عنصر گرڈ کے ذریعہ خود بخود تخلیق کردہ واحد قطار اور کالم کو بھرنے کے لئے پھیل جائے گا۔

بٹ جب ہم دوسرا عنصر شامل کرتے ہیں، تو ہم استعمال کرتے ہوئے ایک اور (مضمون) کالم بناتے ہیں۔ grid-column-start: 2.

جب ہم تیسرا عنصر شامل کرتے ہیں، تو اسے دو کالموں کی چوڑائی تک لے جانا چاہیے - اسی لیے ہم نے استعمال کیا grid-column-start: span 2، لیکن صرف اس صورت میں جب یہ ہے۔ :last-child کیونکہ اگر (اور کب) ہم چوتھا عنصر شامل کرتے ہیں، تو اسے صرف ایک کالم لینا چاہیے۔

اس کو شامل کرنا، ہمارے پاس ہے۔ چار گرڈ کنفیگریشنز صرف کے ساتھ دو اعلانات اور مضمر گرڈ کا جادو:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

آئیے ایک اور کوشش کریں:

ہم پہلی اور دوسری صورتوں کے لیے کچھ نہیں کر رہے ہیں جہاں ہمارے پاس صرف ایک یا دو عناصر ہیں۔ جب ہم کوئی تیسرا عنصر شامل کرتے ہیں، اگرچہ، ہم براؤزر کو بتاتے ہیں کہ - جب تک یہ ہے۔ :last-child - یہ دو کالموں پر محیط ہونا چاہیے۔ جب ہم چوتھا عنصر شامل کرتے ہیں، تو ہم براؤزر کو بتاتے ہیں کہ عنصر کو دوسرے کالم میں رکھنے کی ضرورت ہے۔

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

کیا آپ چال کو حاصل کرنا شروع کر رہے ہیں؟ ہم براؤزر کو عناصر کی تعداد کی بنیاد پر مخصوص ہدایات دیتے ہیں (استعمال کرتے ہوئے :nth-child) اور، بعض اوقات، ایک ہدایت لے آؤٹ کو مکمل طور پر تبدیل کر سکتی ہے۔

واضح رہے کہ جب ہم مختلف مواد کے ساتھ کام کرتے ہیں تو سائز ایک جیسا نہیں ہوگا:

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

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

ارے، ہم نے ابھی تک ان خصوصیات کے ساتھ نہیں کھیلا ہے! grid-auto-rows اور grid-auto-columns ایک گرڈ کنٹینر میں بالترتیب ضمنی قطاروں اور کالموں کا سائز سیٹ کریں۔ یا، جیسا کہ تفصیلات اس کی وضاحت کرتا ہے:

۔ grid-auto-columns اور grid-auto-rows خصوصیات پٹریوں کے سائز کی وضاحت کرتی ہیں جس کے ذریعہ سائز تفویض نہیں کیا گیا ہے۔ grid-template-rows or grid-template-columns.

یہاں ایک اور مثال ہے جہاں ہم چھ عناصر تک جا سکتے ہیں۔ اس بار میں آپ کو کوڈ کو الگ کرنے دوں گا۔ پریشان نہ ہوں، سلیکٹرز پیچیدہ لگ سکتے ہیں لیکن منطق کافی سیدھی ہے۔

یہاں تک کہ چھ عناصر کے ساتھ، ہمیں صرف دو اعلانات کی ضرورت تھی۔ ان تمام پیچیدہ اور متحرک ترتیبوں کا تصور کریں جو ہم کوڈ کی چند سطروں سے حاصل کر سکتے ہیں!

اس کے ساتھ کیا ہو رہا ہے grid-auto-rows اور یہ تین اقدار کیوں لیتا ہے؟ کیا ہم تین قطاروں کی وضاحت کر رہے ہیں؟

نہیں، ہم تین قطاروں کی وضاحت نہیں کر رہے ہیں۔ لیکن ہم ہیں ہماری مضمر قطاروں کے پیٹرن کے طور پر تین اقدار کی وضاحت کرنا۔ منطق مندرجہ ذیل ہے:

• اگر ہمارے پاس ایک قطار ہے، تو اس کا سائز پہلی قیمت کے ساتھ مل جائے گا۔
• اگر ہمارے پاس دو قطاریں ہیں، تو پہلی کو پہلی قدر اور دوسری کو دوسری قدر ملتی ہے۔
• اگر ہمارے پاس تین قطاریں ہیں، تو تینوں قدریں استعمال ہو جائیں گی۔
• اگر ہمارے پاس چار قطاریں ہیں (اور یہاں دلچسپ حصہ آتا ہے)، تو ہم پہلی تین قطاروں کے لیے تین قدریں استعمال کرتے ہیں اور ہم پہلی قدر کو چوتھی قطار کے لیے دوبارہ استعمال کرتے ہیں۔ یہی وجہ ہے کہ یہ ایک قسم کا نمونہ ہے جسے ہم تمام مضمر قطاروں کو سائز دینے کے لیے دہراتے ہیں۔
• اگر ہمارے پاس 100 قطاریں ہیں، تو ان کا سائز تین سے تین ہوگا۔ 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr، وغیرہ

کے برعکس grid-template-rows جو قطاروں کی تعداد اور ان کے سائز کی وضاحت کرتا ہے، grid-auto-rows صرف سائز کی قطار جو راستے میں بن سکتی ہے۔

اگر ہم اپنی مثال پر واپس جائیں تو منطق یہ ہے کہ جب دو قطاریں بنیں گی تو اس کا سائز برابر ہوگا (ہم استعمال کریں گے 2fr 2fr)، لیکن اگر تیسری قطار بنائی جاتی ہے تو ہم اسے تھوڑا سا چھوٹا کرتے ہیں۔

گرڈ پیٹرن

اس آخری کے لیے، ہم پیٹرن کے بارے میں بات کرنے جا رہے ہیں۔ آپ نے شاید وہ دو کالم لے آؤٹ دیکھے ہوں گے جہاں ایک کالم دوسرے سے چوڑا ہے، اور ہر قطار ان کالموں کی جگہ کو تبدیل کرتی ہے۔

اس ترتیب کی ترتیب کو یہ جانے بغیر بھی مشکل ہو سکتا ہے کہ ہم کتنے مواد کے ساتھ کام کر رہے ہیں، لیکن CSS گرڈ کی خودکار جگہ کا تعین کرنے کی مضمر طاقتیں اسے ایک رشتہ دار بنا دیتی ہیں۔

کوڈ پر ایک نظر ڈالیں۔ یہ پیچیدہ لگ سکتا ہے لیکن آئیے اسے توڑ دیتے ہیں کیونکہ یہ کافی سیدھا ہوتا ہے۔

ایسا کرنے کا پہلا کام پیٹرن کی شناخت کرنا ہے. اپنے آپ سے پوچھیں: "کتنے عناصر کے بعد پیٹرن کو دہرانا چاہیے؟" اس صورت میں یہ ہر چار عناصر کے بعد ہے۔ تو، آئیے ابھی کے لیے صرف چار عناصر کو استعمال کرتے ہوئے دیکھتے ہیں:

اب، آئیے گرڈ کی وضاحت کریں اور استعمال کرکے عمومی پیٹرن ترتیب دیں۔ :nth-child عناصر کے درمیان ردوبدل کے لیے سلیکٹر:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

ہم نے کہا کہ ہمارا پیٹرن ہر چار عناصر کو دہراتا ہے، لہذا ہم منطقی طور پر استعمال کریں گے۔ 4n + x کہاں x 1 سے 4 تک۔ پیٹرن کی اس طرح وضاحت کرنا قدرے آسان ہے:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

کامل، ٹھیک ہے؟ ہمارے پاس چار عناصر ہیں، اور پیٹرن کو پانچویں عنصر، نویں عنصر وغیرہ پر دہرائیں۔

وہ :nth-child سلیکٹرز مشکل ہو سکتے ہیں! کرس کے پاس بہت مددگار ہے۔ یہ سب کیسے کام کرتا ہے اس کی وضاحت، سمیت مختلف پیٹرن بنانے کے لئے ترکیبیں.

اب ہم ہر عنصر کو ترتیب دیتے ہیں تاکہ:

1. پہلے عنصر کو دو کالم لینے اور ایک کالم سے شروع کرنے کی ضرورت ہے (grid-column: 1/span 2).
2. دوسرا عنصر تیسرے کالم میں رکھا گیا ہے (grid-column-start: 3).
3. تیسرا عنصر پہلے کالم میں رکھا گیا ہے: (grid-column-start: 1).
4. چوتھا عنصر دو کالم لیتا ہے اور دوسرے کالم سے شروع ہوتا ہے: (grid-column: 2/span 2).

یہ سی ایس ایس میں ہے:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

ہم یہاں رک سکتے ہیں اور کیا جا سکتا ہے… لیکن ہم بہتر کر سکتے ہیں! خاص طور پر، ہم کچھ اعلانات کو ہٹا سکتے ہیں اور ہمارے لیے کام کرنے کے لیے گرڈ کے آٹو پلیسمنٹ کے اختیارات پر بھروسہ کر سکتے ہیں۔ یہ کام کرنے کا سب سے مشکل حصہ ہے اور اس کی شناخت کرنے کے لیے کافی مشق کی ضرورت ہوتی ہے کہ کیا ہٹایا جا سکتا ہے۔

پہلی چیز جو ہم کر سکتے ہیں وہ ہے اپ ڈیٹ grid-column: 1 /span 2 اور صرف استعمال کریں grid-column: span 2 چونکہ، بطور ڈیفالٹ، براؤزر پہلی چیز کو پہلے کالم میں رکھے گا۔ ہم اسے بھی ہٹا سکتے ہیں:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

پہلی، دوسری اور چوتھی اشیاء کو رکھ کر، گرڈ خود بخود تیسری آئٹم کو صحیح جگہ پر رکھتا ہے۔ اس کا مطلب ہے کہ ہم اس کے ساتھ رہ گئے ہیں:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

لیکن چلو ہم بہتر کام کر سکتے ہیں! ہم اسے بھی ہٹا سکتے ہیں:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

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

مجھے لگتا ہے کہ آپ کہانی کا اختتام جانتے ہیں۔ براؤزر خود بخود دوسری اور تیسری اشیاء کو ان خالی جگہوں پر رکھ دے گا۔ تو ہمارا کوڈ اور بھی آسان ہو جاتا ہے:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

ایک بہت ہی ٹھنڈا اور انتہائی لچکدار پیٹرن بنانے کے لیے صرف پانچ اعلانات کی ضرورت ہے۔ اصلاح کا حصہ مشکل ہوسکتا ہے، لیکن آپ اس کی عادت ڈالیں اور مشق کے ساتھ کچھ چالیں حاصل کریں۔

استعمال کیوں نہیں کرتے grid-template-columns واضح کالموں کی وضاحت کرنا کیونکہ ہم کالموں کی تعداد جانتے ہیں؟

ہم ایسا کر سکتے ہیں! اس کا کوڈ یہ ہے:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

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

واضح نقطہ نظر زیادہ سیدھا ہے، جب کہ ایک مضمر گرڈ آپ سے تقاضا کرتا ہے کہ - پن کو معاف کریں - ان خالی جگہوں کو پُر کریں جہاں CSS پردے کے پیچھے اضافی کام کر رہی ہے۔ آخر میں، مجھے یقین ہے کہ مضمر گرڈز کی ٹھوس سمجھ رکھنے سے آپ کو CSS گرڈ الگورتھم کو بہتر طور پر سمجھنے میں مدد ملے گی۔ سب کے بعد، ہم یہاں اس بات کا مطالعہ کرنے کے لیے نہیں ہیں کہ کیا واضح ہے — ہم یہاں جنگلی علاقوں کو دریافت کرنے کے لیے موجود ہیں!

آئیے ایک اور نمونہ آزماتے ہیں، اس بار تھوڑا تیز:

ہمارا پیٹرن ہر چھ عناصر کو دہراتا ہے۔ تیسرے اور چوتھے عناصر میں سے ہر ایک کو دو مکمل قطاروں پر قبضہ کرنے کی ضرورت ہے۔ اگر ہم تیسرے اور چوتھے عناصر کو رکھیں تو ایسا لگتا ہے کہ ہمیں دوسروں کو چھونے کی ضرورت نہیں ہے، تو آئیے درج ذیل کو آزماتے ہیں:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

ہمم، اچھا نہیں۔ ہمیں پہلے کالم میں دوسرا عنصر رکھنے کی ضرورت ہے۔ بصورت دیگر، گرڈ اسے خود بخود دوسرے کالم میں رکھ دے گا۔

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

بہتر، لیکن ابھی مزید کام باقی ہے، ہمیں تیسرے عنصر کو اوپر کی طرف منتقل کرنے کی ضرورت ہے۔ اسے پہلی قطار میں اس طرح رکھنے کی کوشش کرنا پرکشش ہے:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

لیکن یہ کام نہیں کرتا کیونکہ یہ سب کو مجبور کرتا ہے۔ 6n + 3 عناصر کو اسی علاقے میں رکھا جائے جو گڑبڑ کی ترتیب بناتا ہے۔ اصل حل یہ ہے کہ تیسرے عنصر کی ابتدائی تعریف کو برقرار رکھیں اور شامل کریں۔ grid-auto-flow: dense خلا کو بھرنے کے لئے. MDN سے:

[دی] "گھنا" پیکنگ الگورتھم بھرنے کی کوشش کرتا ہے۔ پہلے گرڈ میں سوراخ میںاگر چھوٹی اشیاء بعد میں سامنے آئیں۔ اس کی وجہ سے آئٹمز غیر ترتیب سے ظاہر ہو سکتے ہیں، جب ایسا کرنے سے بڑی آئٹمز کے رہ جانے والے سوراخ بھر جائیں گے۔ اگر اسے چھوڑ دیا جاتا ہے تو، ایک "سپرس" الگورتھم استعمال کیا جاتا ہے، جہاں جگہ کا تعین الگورتھم کبھی بھی اشیاء کو رکھ کر گرڈ میں "آگے" بڑھتا ہے، سوراخوں کو بھرنے کے لیے کبھی پیچھے نہیں ہٹتا ہے۔ یہ اس بات کو یقینی بناتا ہے کہ خود بخود رکھی گئی تمام اشیاء "ترتیب کے مطابق" ظاہر ہوں، چاہے اس سے سوراخ ہو جائیں جو بعد میں آنے والی اشیاء سے بھرے جا سکتے تھے۔

میں جانتا ہوں کہ یہ پراپرٹی بہت بدیہی نہیں ہے لیکن جب آپ کو پلیسمنٹ کا مسئلہ درپیش ہو تو اسے کبھی نہ بھولیں۔ مختلف کنفیگریشنز کو بیکار آزمانے سے پہلے، اسے شامل کریں کیونکہ یہ بغیر کسی اضافی کوشش کے آپ کی ترتیب کو ٹھیک کر سکتا ہے۔

کیوں نہ ہمیشہ اس پراپرٹی کو بطور ڈیفالٹ شامل کریں؟

میں اس کی سفارش نہیں کرتا کیونکہ، بعض صورتوں میں، ہم ایسا سلوک نہیں چاہتے ہیں۔ نوٹ کریں کہ وہاں MDN کی وضاحت کس طرح بتاتی ہے کہ اس کی وجہ سے بڑی اشیاء کے چھوڑے گئے سوراخوں کو بھرنے کے لیے آئٹمز "آؤٹ آف آرڈر" میں بہہ جاتے ہیں۔ بصری آرڈر عام طور پر اتنا ہی اہم ہوتا ہے جتنا کہ سورس آرڈر، خاص طور پر جب بات قابل رسائی انٹرفیس کی ہو، اور grid-auto-flow: dense بعض اوقات بصری اور ماخذ کی ترتیب کے درمیان مماثلت پیدا کر سکتی ہے۔

ہمارا حتمی کوڈ پھر ہے:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

ایک دوسرا؟ چلو!

اس کے لیے، میں زیادہ بات نہیں کروں گا اور اس کے بجائے آپ کو اپنے استعمال کردہ کوڈ کی ایک مثال دکھاؤں گا۔ یہ دیکھنے کی کوشش کریں کہ آیا آپ کو معلوم ہوتا ہے کہ میں اس کوڈ تک کیسے پہنچا:

کالے رنگ کی اشیاء کو واضح طور پر گرڈ میں رکھا گیا ہے۔ یہ واضح رہے کہ ہم ایک ہی ترتیب کو اس سے زیادہ طریقے سے حاصل کرسکتے ہیں کہ میں وہاں کیسے پہنچا۔ کیا آپ ان کا بھی پتہ لگا سکتے ہیں؟ استعمال کرنے کے بارے میں کیا ہے grid-template-columns? تبصرہ سیکشن میں اپنے کام کا اشتراک کریں.

میں آپ کو ایک آخری نمونہ کے ساتھ چھوڑنے جا رہا ہوں:

مجھے کیا کرنا ایک حل ہے اس کے لیے لیکن اب آپ کی مشق کرنے کی باری ہے۔ ہم نے جو کچھ سیکھا ہے اسے لیں اور اسے خود سے کوڈ کرنے کی کوشش کریں اور پھر اس کا میرے حل سے موازنہ کریں۔ پریشان نہ ہوں اگر آپ کسی لفظ کے ساتھ ختم کرتے ہیں - سب سے اہم چیز کام کرنے کا حل تلاش کرنا ہے۔

زیادہ چاہتے ہیں؟

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

اپ ریپنگ

سی ایس ایس گرڈ برسوں سے موجود ہے، لیکن ابھی بھی بہت سی غیر معروف اور استعمال شدہ چالیں ہیں جن پر بڑے پیمانے پر بحث نہیں کی جاتی ہے۔ مضمر گرڈ اور آٹو پلیسمنٹ کی خصوصیات ان میں سے دو ہیں!

اور ہاں، یہ مشکل ہو سکتا ہے! مضمر گرڈز کے پیچھے منطق کو سمجھنے میں مجھے کافی وقت لگا ہے اور میں اب بھی آٹو پلیسمنٹ کے ساتھ جدوجہد کر رہا ہوں۔ اگر آپ واضح اور مضمر گرڈز کے گرد اپنا سر لپیٹنے میں زیادہ وقت گزارنا چاہتے ہیں، تو یہاں چند اضافی وضاحتیں اور مثالیں ہیں جن کو دیکھنا ضروری ہے:

اسی طرح، آپ کے بارے میں پڑھنا چاہتے ہیں grid-auto-columns CSS-Tricks Almanac میں کیوں کہ مجتبیٰ سیدی بہت تفصیل سے جاتے ہیں اور اس میں رویے کی وضاحت میں مدد کے لیے ناقابل یقین حد تک مددگار بصری شامل ہیں۔

جیسا کہ میں نے کہا جب ہم نے شروع کیا تھا، ہم نے یہاں جن طریقوں کا احاطہ کیا ہے ان کا مقصد ان عام طریقوں کو تبدیل کرنا نہیں ہے جو آپ گرڈ بنانے کے لیے پہلے سے جانتے ہیں۔ میں صرف مختلف طریقے تلاش کر رہا ہوں جو کچھ معاملات میں مددگار ثابت ہو سکتے ہیں۔