CSS-এ সাবগ্রিড
সাবগ্রিড একটি নেস্টেড গ্রিডের বৈচিত্র্য,
কিন্তু এর বিপরীতে এটি প্যারেন্ট
গ্রিড কনটেইনার এর আকারকে প্রভাবিত করে।
সাবগ্রিড সেট করতে, চাইল্ড এলিমেন্টে
display প্রপার্টি
subgrid মান সহ সেট করতে হবে।
উদাহরণস্বরূপ, চতুর্থ এলিমেন্টে একটি নেস্টেড গ্রিড তৈরি করা যাক:
<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: subgrid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
padding: 5px;
}
#elem4 > div {
grid-gap: 5px;
padding: 6px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
ধরুন আপনার কাছে পাঁচটি এলিমেন্ট নিয়ে গঠিত একটি গ্রিড আছে, যা দুটি কলামে সাজানো। তৃতীয় এলিমেন্টে একটি নেস্টেড গ্রিড তৈরি করুন, যার মধ্যে আবার দুটি চাইল্ড এলিমেন্ট থাকবে।
পূর্ববর্তী কাজটি এমনভাবে পরিবর্তন করুন, যাতে নেস্টেড গ্রিডে চারটি চাইল্ড এলিমেন্ট থাকে।
দুটি নেস্টেড গ্রিড তৈরি করুন - দ্বিতীয় এলিমেন্ট এবং পঞ্চম এলিমেন্টে।
