পিন্টারেস্ট এর মতো গ্রিড লেআউট তৈরি করার জন্য আমাদের এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট তিনটি ল্যাঙ্গুয়েজের প্রয়োজন হবে। তো প্রথমে নিচের এইচটিএমএল এর মত করে প্রথমে একটি প্যারেন্ট ডিব(div) এর মধ্যে প্রতিটি গ্রিড এর জন্য চাইল্ড ডিব নিন এবং চাইল্ড ডিব এর ভিতরে আরেকটি ডিব নিন যেটার ভিতরে গ্রিড এর সকল কনটেন্ট থাকবে। আর হ্যা ক্লাস নেম গুলো আমাদের ডেমো এইচটিএমএল এর মতো করেই দেবেন, তা না হলে আবার সিএসএস জাভাস্ক্রিপ্ট সবকিছু আবারো মডিফাই করতে হবে।
<div class="grid">
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x600/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x400/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x500/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x400/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x400/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x500/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x400/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x400/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x500/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x400/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x600/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x300/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x500/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x500/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x300/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x500/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x600/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x500/fff/555.png"/>
</div>
</div>
<div class="grid-item">
<div class="grid-item-inner">
<img src="https://via.placeholder.com/300x300/fff/555.png"/>
</div>
</div>
</div>আমাদের দেওয়া ডেমো এইচটিএমএল এর মত করে আপনার এইচটিএমএল তৈরি করার পর এবার নিচের সিএসএস কোডটুকু কপি করে আপনার সিএসএস এর মধ্যে যুক্ত করে দিন। আমাদের দেওয়া সিএসএস দিয়ে শুধু লেআউট তৈরি করা হয়েছে। আপনি আপনার প্রয়োজন অনুযায়ী সেটা স্টাইল করে নিতে পারবেন।
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-auto-rows: 0;
padding: 10px;
background: #99f;
}
.grid-item {
background: #fff;
border-radius: 10px;
overflow: hidden;
}
.grid-item img {
width: 100%;
}এইচটিএমএল এবং সিএসএস এর কাজ শেষ হলে এবার নিচের জাভাস্ক্রিপ্ট কোডটুকু কপি করে আপনার জাভাস্ক্রিপ্ট এর মধ্যে যুক্ত করে নিন। আর হ্যা গ্রিডের মধ্যে ইমেজ ব্যবহার করলে অবশ্যই এই (https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js) এক্সটার্নাল জাভাস্ক্রিপ্ট ফাইলটি আপনার এইচটিএমএল এর সাথে লিঙ্ক করে নেবেন।
function resizeGridItem(item){
grid = document.getElementsByClassName("grid")[0];
rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
rowSpan = Math.ceil((item.querySelector('.grid-item-inner').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
item.style.gridRowEnd = "span "+rowSpan;
}
function resizeAllGridItems(){
allItems = document.getElementsByClassName("grid-item");
for(x=0;x<allItems.length;x++){
resizeGridItem(allItems[x]);
}
}
function resizeInstance(instance){
item = instance.elements[0];
resizeGridItem(item);
}
window.onload = resizeAllGridItems();
window.addEventListener("resize", resizeAllGridItems);
allItems = document.getElementsByClassName("grid-item");
for(x=0;x<allItems.length;x++){
imagesLoaded( allItems[x], resizeInstance);
}Download Project
তো পোস্ট মূলত শেষ। আপনি যদি পুরো প্রজেক্ট এর সকল কোড ডাউনলোড করে রাখতে চান তাহলে নিচে প্রজেক্ট এর গুগল ড্রাইভ লিঙ্ক দিলাম সেখান থেকে ডাউনলোড করতে পারবেন, ধন্যবাদ সবাইকে।