নেস্টেড CSS গ্রিড
গ্রিড সিস্টেমে আপনার নিজের তৈরি নেটওয়ার্কের ভিতরে আরেকটি নেস্টেড গ্রিড যোগ করার ক্ষমতা রয়েছে। সাইটের ব্লকের ভিতরে ছোট উপাদান স্থাপন করার সময় নেস্টেড গ্রিডগুলি ব্যাপকভাবে ব্যবহৃত হয়।
এই ক্ষমতা ব্যবহার করার জন্য, আপনাকে
চাইল্ড এলিমেন্টে নিজেই
display প্রপার্টি
grid মান সহ সেট করতে হবে।
উদাহরণস্বরূপ, আসুন গ্রিডের একটি সেলে আরেকটি গ্রিড তৈরি করি:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
#parent {
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem4 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
}
#elem4 > div {
grid-gap: 5px;
padding: 6px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
ধরুন আপনার কাছে পাঁচটি উপাদান নিয়ে গঠিত একটি গ্রিড রয়েছে, যা তিনটি কলাম বরাবর সাজানো। দ্বিতীয় উপাদানের ভিতরে একটি নেস্টেড গ্রিড তৈরি করুন, যার মধ্যে আবার তিনটি চাইল্ড এলিমেন্ট থাকবে।
পূর্ববর্তী কাজটি এমনভাবে পরিবর্তন করুন যাতে নেস্টেড গ্রিডে পাঁচটি চাইল্ড এলিমেন্ট থাকে।
প্রথম এবং তৃতীয় উপাদানে তিনটি চাইল্ড এলিমেন্ট সহ নেস্টেড গ্রিড তৈরি করুন।
