CSS گرڈ اور حسب ضرورت شکلیں، حصہ 1

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

جیسا کہ، کیا ہوگا اگر تصاویر بالکل مربع نہیں ہیں بلکہ اس کے بجائے مسدس یا رومبس کی شکل میں ہیں؟ سپوئلر الرٹ: ہم یہ کر سکتے ہیں۔ درحقیقت، ہم سی ایس ایس گرڈ تکنیکوں کو یکجا کرنے جا رہے ہیں جنہیں ہم نے کچھ سی ایس ایس میں دیکھا اور چھوڑا ہے۔ clip-path اور mask کسی بھی شکل کے لیے تصاویر کے فینسی گرڈ بنانے کا جادو جس کا آپ تصور کر سکتے ہیں!

آئیے کچھ مارک اپ کے ساتھ شروع کریں۔

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

اس نے کہا، آئیے اس کے ساتھ شروع کریں:

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <!-- as many times as we want -->
</div>

تصاویر کے ساتھ ایک کنٹینر ہمیں یہاں درکار ہے۔ بس مزید کچھ نہیں!

ہیکساگون کا سی ایس ایس گرڈ

اسے بعض اوقات "شہد کا کام" گرڈ بھی کہا جاتا ہے۔

وہاں پہلے سے ہی بہت ساری دیگر بلاگ پوسٹس موجود ہیں جو یہ بتاتی ہیں کہ اسے کیسے بنایا جائے۔ ہیک، آئی ایک نے لکھا یہاں CSS-Tricks پر! وہ مضمون اب بھی اچھا ہے اور جوابی ترتیب بنانے پر بہت گہرا ہے۔ لیکن اس مخصوص معاملے کے لیے، ہم زیادہ آسان سی ایس ایس اپروچ پر انحصار کرنے جا رہے ہیں۔

سب سے پہلے، چلو استعمال کرتے ہیں clip-path مسدس شکل بنانے کے لیے امیجز پر اور ہم ان سب کو ایک ہی گرڈ ایریا میں رکھتے ہیں تاکہ وہ اوورلیپ ہو جائیں۔

.gallery {
  --s: 150px; /* controls the size */
  display: grid;
}

.gallery > img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1.15;
  object-fit: cover;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

ابھی تک کچھ بھی پسند نہیں ہے۔ تمام تصاویر مسدس اور ایک دوسرے کے اوپر ہیں۔ تو ایسا لگتا ہے کہ ہمارے پاس صرف ایک ہیکساگون کی شکل کا تصویری عنصر ہے، لیکن واقعی سات ہیں۔

اگلا مرحلہ یہ ہے کہ تصاویر کو صحیح طریقے سے گرڈ پر رکھنے کے لیے ان کا ترجمہ لاگو کیا جائے۔

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

translate((height + gap)*sin(0deg), (height + gap)*cos(0))
translate((height + gap)*sin(60deg), (height + gap)*cos(60deg))
translate((height + gap)*sin(120deg), (height + gap)*cos(120deg))
translate((height + gap)*sin(180deg), (height + gap)*cos(180deg))
translate((height + gap)*sin(240deg), (height + gap)*cos(240deg))
translate((height + gap)*sin(300deg), (height + gap)*cos(300deg))

چند حسابات اور اصلاح بعد میں (آئیے اس بورنگ حصے کو چھوڑ دیں، ٹھیک ہے؟) ہمیں درج ذیل سی ایس ایس ملتا ہے:

.gallery {
  --s: 150px; /* control the size */
  --g: 10px;  /* control the gap */
  display: grid;
}
.gallery > img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1.15;
  object-fit: cover;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50% ,75% 100%, 25% 100%, 0 50%);
  transform: translate(var(--_x,0), var(--_y,0));
}
.gallery > img:nth-child(1) { --_y: calc(-100% - var(--g)); }
.gallery > img:nth-child(7) { --_y: calc( 100% + var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) { --_x: calc(-75% - .87*var(--g)); }
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) { --_x: calc( 75% + .87*var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) { --_y: calc(-50% - .5*var(--g)); }
.gallery > img:nth-child(5), 
.gallery > img:nth-child(6) { --_y: calc( 50% + .5*var(--g)); }

جب ہم حاصل کریں گے تو شاید یہ آسان ہو جائے گا۔ سی ایس ایس میں حقیقی مثلثیات کے افعال!

ہر تصویر کا ترجمہ کے ذریعے کیا جاتا ہے۔ --_x اور --_y متغیرات جو ان فارمولوں پر مبنی ہیں۔ صرف دوسری تصویر (nth-child(2)) کسی بھی سلیکٹر میں غیر متعینہ ہے کیونکہ یہ مرکز میں ہے۔ اگر آپ مختلف ترتیب استعمال کرنے کا فیصلہ کرتے ہیں تو یہ کوئی بھی تصویر ہو سکتی ہے۔ یہاں وہ آرڈر ہے جو میں استعمال کر رہا ہوں:

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

کیا لگتا ہے؟ ہم صرف چند اقدار کو اپ ڈیٹ کر کے ایک اور مسدس گرڈ حاصل کر سکتے ہیں۔

اگر آپ کوڈ کو چیک کرتے ہیں اور اس کا پچھلے والے سے موازنہ کرتے ہیں تو آپ دیکھیں گے کہ میں نے صرف اندر کی اقدار کو تبدیل کر دیا ہے۔ clip-path اور میں نے درمیان میں تبدیل کر دیا --x اور --y. بس!

Rhombuses کا CSS گرڈ

Rhombus ایک مربع کے لیے ایک ایسا فینسی لفظ ہے جو 45 ڈگری گھمایا جاتا ہے۔

ایک ہی HTML، یاد ہے؟ ہم سب سے پہلے CSS میں تصاویر کے 2×2 گرڈ کی وضاحت کرتے ہوئے شروع کرتے ہیں:

.gallery {
  --s: 150px; /* controls the size */

  display: grid;
  gap: 10px;
  grid: auto-flow var(--s) / repeat(2, var(--s));
  place-items: center;
}
.gallery > img {
  width: 100%; 
  aspect-ratio: 1;
  object-fit: cover;
}

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

grid: auto-flow var(--s) / repeat(2,var(--s));

/* is equivalent to this: */
grid-template-columns: repeat(2, var(--s));
grid-auto-rows: var(--s);

یہ کے برابر دو کالموں کی وضاحت کرتا ہے۔ --s متغیر ہے اور تمام قطاروں کی اونچائی کو سیٹ کرتا ہے۔ --s اس کے ساتھ ساتھ. چونکہ ہمارے پاس چار تصاویر ہیں، ہمیں خود بخود 2×2 گرڈ مل جائے گا۔

یہاں ایک اور طریقہ ہے جسے ہم لکھ سکتے ہیں:

grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));

…جسے کے ساتھ کم کیا جا سکتا ہے۔ grid شارٹ ہینڈ:

grid: repeat(2,var(--s)) / repeat(2,var(--s));

گرڈ سیٹ کرنے کے بعد، ہم اسے اور تصاویر کو CSS کے ساتھ گھماتے ہیں۔ transforms اور ہمیں یہ ملتا ہے:

نوٹ کریں کہ میں ان دونوں کو کیسے گھماتا ہوں۔ 45deg، لیکن مخالف سمت میں۔

.gallery {
  /* etc. */
  transform: rotate(45deg);
}
.gallery > img {
  /* etc. */
  transform: rotate(-45deg);
}

تصاویر کو منفی سمت میں گھمانا انہیں گرڈ کے ساتھ گھمائے جانے سے روکتا ہے تاکہ وہ سیدھی رہیں۔ اب، ہم درخواست دیتے ہیں a clip-path ان میں سے ایک رومبس کی شکل کو تراشنا۔

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

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

پریشان نہ ہوں، میں مزید بورنگ جیومیٹری متعارف نہیں کرواؤں گا۔ آپ کو صرف یہ جاننے کی ضرورت ہے کہ ہر دائرے کے رداس کے درمیان تعلق 2 کا مربع جڑ ہے (sqrt(2))۔ یہ وہ قدر ہے جس کی ہمیں علاقے کو بھرنے کے لیے اپنی تصاویر کا سائز بڑھانے کی ضرورت ہے۔ ہم استعمال کریں گے۔ 100%*sqrt(2) = 141% اور کیا جائے!

.gallery {
  --s: 150px; /* control the size */

  display: grid;
  grid: auto-flow var(--s) / repeat(2,var(--s));
  gap: 10px;
  place-items: center;
  transform: rotate(45deg);
}
.gallery > img {
  width: 141%; /* 100%*sqrt(2) = 141% */
  aspect-ratio: 1;
  object-fit: cover;
  transform: rotate(-45deg);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

مسدس گرڈ کی طرح، ہم اس اچھے زومنگ ہوور اثر سے چیزوں کو مزیدار بنا سکتے ہیں:

سہ رخی شکلوں کا CSS گرڈ

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

ہم انہیں درج ذیل CSS کے ساتھ 3×2 گرڈ کے اندر رکھتے ہیں۔

.gallery {
  display: grid;
  gap: 10px; 
  grid-template-columns: auto auto auto; /* 3 columns */
  place-items: center;
}
.gallery > img {
  width: 200px; /* controls the size */
  aspect-ratio: 1;
  object-fit: cover;
}
/* the clip-path values */
.gallery > img:nth-child(1) { clip-path: polygon(0 0, 50% 0, 100% 100% ,0 100%); }
.gallery > img:nth-child(2) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.gallery > img:nth-child(3) { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%); }
.gallery > img:nth-child(4) { clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); }
.gallery > img:nth-child(5) { clip-path: polygon(50% 0, 100% 100%, 0% 100%); }
.gallery > img:nth-child(6) { clip-path: polygon(0 0, 100% 0 ,100% 100%, 50% 100%); } }

ہمیں جو ملتا ہے وہ یہ ہے:

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

grid-template-columns: auto 0 auto;

مجھے اس کے ساتھ ہلنا پڑا clip-path قدریں اس بات کو یقینی بنانے کے لیے کہ وہ سب ایک پہیلی کی طرح اچھی طرح سے فٹ ہوتے دکھائی دیں گے۔ جب درمیانی کالم کی چوڑائی صفر ہوتی ہے تو اصل تصاویر اوورلیپ ہوجاتی ہیں، لیکن تصویروں کو سلائس کرنے کے بعد، وہم بالکل درست ہے:

سی ایس ایس پیزا پائی گرڈ

کیا لگتا ہے؟ ہم صرف شامل کرکے ایک اور ٹھنڈا گرڈ حاصل کرسکتے ہیں۔ border-radius اور overflow ہمارے گرڈ یا مثلث شکلوں میں۔ 🎉

پہیلی کے ٹکڑوں کا سی ایس ایس گرڈ

اس بار ہم سی ایس ایس کے ساتھ کھیلنے جا رہے ہیں۔ mask امیجز کو ایک پہیلی کے ٹکڑوں کی طرح نظر آنے کے لیے۔

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

گرڈ کو ترتیب دینا ابھی تک ایک سنچ ہونا چاہئے، لہذا آئیے اس کی بجائے پر توجہ مرکوز کریں۔ mask حصہ.

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

--g: 6px; /* controls the gap */
--r: 42px;  /* control the circular shapes */

background: 
  radial-gradient(var(--r) at left 50% bottom var(--r), green 95%, #0000),
  radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%, #0000 95%, red)
  top/100% calc(100% - var(--r)) no-repeat;

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

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

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

ہمیں تصاویر کی اونچائی/چوڑائی میں اضافہ کرکے ایک اوور فلو بنانے کی ضرورت ہے۔ مندرجہ بالا اعداد و شمار سے، ہمیں پہلی اور چوتھی تصویر کی اونچائی میں اضافہ کرنا ہوگا جبکہ ہم دوسری اور تیسری تصویر کی چوڑائی کو بڑھاتے ہیں. آپ نے شاید پہلے ہی اندازہ لگا لیا ہے کہ ہمیں ان کا استعمال کرتے ہوئے ان میں اضافہ کرنے کی ضرورت ہے۔ --r متغیر.

.gallery > img:is(:nth-child(1),:nth-child(4)) {
  width: 100%;
  height: calc(100% + var(--r));
}
.gallery > img:is(:nth-child(2),:nth-child(3)) {
  height: 100%;
  width: calc(100% + var(--r));
}

ہم قریب آ رہے ہیں!

ہم نے اوورلیپ بنایا لیکن، بطور ڈیفالٹ، ہماری تصاویر یا تو دائیں طرف (اگر ہم چوڑائی بڑھاتے ہیں) یا نیچے (اگر ہم اونچائی بڑھاتے ہیں) اوورلیپ ہو جاتی ہیں۔ لیکن یہ وہ نہیں ہے جو ہم دوسری اور چوتھی تصاویر کے لیے چاہتے ہیں۔ فکس استعمال کرنا ہے۔ place-self: end ان دو تصاویر پر اور ہمارا مکمل کوڈ یہ بن جاتا ہے:

یہاں ایک اور مثال ہے جہاں میں شعاعی میلان کی بجائے کونک گریڈینٹ استعمال کر رہا ہوں۔ یہ ایک ہی بنیادی HTML اور CSS کو برقرار رکھتے ہوئے ہمیں سہ رخی پہیلی کے ٹکڑے فراہم کرتا ہے۔

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

اپ ریپنگ

اس پہلے حصے کے لیے بس اتنا ہی ہے! سی ایس ایس گرڈ کے بارے میں جو چیزیں ہم پہلے ہی سیکھ چکے ہیں ان کو ملا کر کچھ شامل کر کے clip-path اور mask جادو، ہم مختلف قسم کی شکلوں پر مشتمل گرڈ لے آؤٹ بنانے کے قابل تھے۔ اور ہم نے ہر بار ایک ہی HTML مارک اپ کا استعمال کیا! اور مارک اپ خود ایک کنٹینر سے زیادہ کچھ نہیں ہے جس میں مٹھی بھر تصویری عناصر ہیں!

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

میں تصویری پینلز کو پھیلانے کا ڈیمو لینے کا سوچ رہا ہوں جو ہم نے مل کر بنایا تھا۔ یہ دوسرا مضمون:

…اور اسے زیگ زگ تصویری پینلز میں تبدیل کریں! اور یہ صرف ایک مثال ہے جو ہم اگلے مضمون میں دریافت کریں گے۔