CSS গ্রিড এবং কাস্টম আকার, পার্ট 1

পূর্ববর্তী একটি নিবন্ধে, আমি সিএসএস গ্রিডের ক্ষমতা দেখেছিলাম এর অটো-প্লেসমেন্ট ক্ষমতা ব্যবহার করে জটিল লেআউট তৈরি করুন. আমি অন্য নিবন্ধে যে এক ধাপ এগিয়ে নিয়েছি একটি গ্রিড বিন্যাসে চিত্রগুলিতে একটি জুমিং হোভার প্রভাব যুক্ত করেছে৷. এই সময়, আমি অন্য ধরনের গ্রিডে ডুব দিতে চাই, যেটি আকারের সাথে কাজ করে।

যেমন, ছবিগুলো যদি পুরোপুরি বর্গাকার না হয় বরং ষড়ভুজ বা রম্বসের মতো আকৃতির হয়? স্পয়লার সতর্কতা: আমরা এটা করতে পারি। আসলে, আমরা CSS গ্রিড কৌশলগুলিকে একত্রিত করতে যাচ্ছি যা আমরা দেখেছি এবং কিছু 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 গ্রিড

এটিকে কখনও কখনও "মধুচক্র" গ্রিড হিসাবেও উল্লেখ করা হয়।

সেখানে ইতিমধ্যেই প্রচুর অন্যান্য ব্লগ পোস্ট রয়েছে যা দেখায় যে এটি কীভাবে করা যায়। হেক, আই এক লিখেছেন এখানে CSS-ট্রিকস! এই নিবন্ধটি এখনও ভাল এবং একটি প্রতিক্রিয়াশীল বিন্যাস তৈরির উপর গভীরভাবে চলে। কিন্তু এই নির্দিষ্ট ক্ষেত্রে, আমরা একটি অনেক সহজ CSS পদ্ধতির উপর নির্ভর করতে যাচ্ছি।

প্রথমত, এর ব্যবহার করা যাক 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%);
}

এখনও অভিনব কিছুই. সমস্ত ছবি ষড়ভুজ এবং একে অপরের উপরে। তাই দেখে মনে হচ্ছে আমাদের কাছে একটি একক ষড়ভুজ-আকৃতির ইমেজ উপাদান, কিন্তু সত্যিই সাতটি আছে।

পরবর্তী পদক্ষেপটি হল গ্রিডে সঠিকভাবে স্থাপন করার জন্য চিত্রগুলিতে একটি অনুবাদ প্রয়োগ করা।

লক্ষ্য করুন যে আমরা এখনও ইমেজগুলির একটিকে কেন্দ্রে রাখতে চাই। বাকিগুলো CSS ব্যবহার করে এর চারপাশে স্থাপন করা হয় 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))

কিছু গণনা এবং অপ্টিমাইজেশন পরে (আসুন সেই বিরক্তিকর অংশটি বাদ দেওয়া যাক, তাই না?) আমরা নিম্নলিখিত CSS পাই:

.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)); }

আমরা পেতে হলে হয়তো যে সহজ হবে CSS-এ বাস্তব ত্রিকোণমিতি ফাংশন!

প্রতিটি ইমেজ দ্বারা অনুবাদ করা হয় --_x এবং --_y সেই সূত্রের উপর ভিত্তি করে ভেরিয়েবল। শুধুমাত্র দ্বিতীয় ছবি (nth-child(2)) যে কোনো নির্বাচকের মধ্যে অনির্ধারিত কারণ এটি কেন্দ্রে অবস্থিত। আপনি একটি ভিন্ন ক্রম ব্যবহার করার সিদ্ধান্ত নিলে এটি যে কোনো ছবি হতে পারে। আমি যে অর্ডারটি ব্যবহার করছি তা এখানে:

কোডের মাত্র কয়েকটি লাইনের সাথে, আমরা চিত্রগুলির একটি দুর্দান্ত গ্রিড পাই। এটিতে, জিনিসগুলিকে আরও সুন্দর করতে আমি চিত্রগুলিতে একটু হোভার প্রভাব যুক্ত করেছি।

অনুমান কি? আমরা কেবল কয়েকটি মান আপডেট করে আরেকটি ষড়ভুজ গ্রিড পেতে পারি।

আপনি যদি কোডটি পরীক্ষা করেন এবং এটিকে আগেরটির সাথে তুলনা করেন তবে আপনি লক্ষ্য করবেন যে আমি কেবল ভিতরের মানগুলিকে অদলবদল করেছি clip-path এবং আমি মধ্যে সুইচ --x এবং --y. এখানেই শেষ!

রম্বসের CSS গ্রিড

রম্বস 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);
}

ছবিগুলিকে নেতিবাচক দিকে ঘোরানো তাদের গ্রিডের সাথে ঘোরানো থেকে বাধা দেয় যাতে তারা সোজা থাকে। এখন, আমরা একটি আবেদন 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 মানগুলি নিশ্চিত করার জন্য যে সেগুলি একটি ধাঁধার মতো সুন্দরভাবে একসাথে ফিট হবে বলে মনে হবে। আসল চিত্রগুলি ওভারল্যাপ হয় যখন মধ্য কলামের প্রস্থ শূন্য থাকে, কিন্তু চিত্রগুলিকে টুকরো টুকরো করার পরে, বিভ্রমটি নিখুঁত হয়:

CSS পিজা পাই গ্রিড

অনুমান কি? আমরা সহজভাবে যোগ করে আরেকটি শীতল গ্রিড পেতে পারি border-radius এবং overflow আমাদের গ্রিড বা ত্রিভুজাকার আকারে। 🎉

সিএসএস গ্রিড পাজল পিস

এবার আমরা CSS নিয়ে খেলতে যাচ্ছি mask ইমেজ একটি ধাঁধা টুকরা মত চেহারা করতে সম্পত্তি.

আপনি ব্যবহার না করে থাকেন mask সঙ্গে CSS গ্রেডিয়েন্ট, আমি অত্যন্ত সুপারিশ এই অন্য নিবন্ধ আমি এই বিষয়ে লিখেছিলাম কারণ এটি পরবর্তীতে সাহায্য করবে। গ্রেডিয়েন্ট কেন? কারণ যে আমরা ধাঁধা টুকরা আকারে বৃত্তাকার খাঁজ পেতে ব্যবহার করছি.

গ্রিড সেট আপ করা এখন এক চিনতে হবে, তাই এর পরিবর্তে এর উপর ফোকাস করা যাক 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 পরিবর্তনশীল ধাঁধার আকারের বৃত্তাকার অংশগুলির আকার নিয়ন্ত্রণ করে।

এখন আমরা একই CSS নিই এবং আরও তিনটি আকার তৈরি করতে এতে কয়েকটি মান আপডেট করি:

আমাদের আকৃতি আছে, কিন্তু ওভারল্যাপিং প্রান্তগুলি নয় যেগুলিকে একত্রে ফিট করার জন্য আমাদের প্রয়োজন৷ প্রতিটি চিত্র এটি যে গ্রিড কক্ষে রয়েছে তার মধ্যে সীমাবদ্ধ, তাই এই মুহুর্তে আকারগুলি কেন এলোমেলো হয় তা বোঝা যায়:

আমাদের ইমেজের উচ্চতা/প্রস্থ বাড়িয়ে একটি ওভারফ্লো তৈরি করতে হবে। উপরের চিত্র থেকে, আমাদের প্রথম এবং চতুর্থ চিত্রের উচ্চতা বাড়াতে হবে যখন আমরা দ্বিতীয় এবং তৃতীয়টির প্রস্থ বাড়াব। আপনি সম্ভবত ইতিমধ্যে অনুমান করেছেন যে আমাদের ব্যবহার করে তাদের বৃদ্ধি করতে হবে --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 মার্কআপ ব্যবহার করেছি! এবং মার্কআপ নিজেই একটি মুষ্টিমেয় চিত্র উপাদান সহ একটি ধারক ছাড়া আর কিছুই নয়!

দ্বিতীয় অংশে, আমরা আরও অভিনব আকার এবং হোভার প্রভাব সহ আরও জটিল চেহারার গ্রিডগুলি অন্বেষণ করতে যাচ্ছি।

আমরা একসাথে তৈরি করা চিত্র প্যানেল সম্প্রসারণের ডেমো নেওয়ার পরিকল্পনা করছি এই অন্য নিবন্ধ:

…এবং এটিকে একটি জিগ-জ্যাগ ইমেজ প্যানেলে রূপান্তর করুন! এবং আমরা পরবর্তী নিবন্ধে আবিষ্কার করব এমন অনেকগুলির মধ্যে এটি শুধুমাত্র একটি উদাহরণ।