আরেকটি ক্লাসিক: 12-স্প্যান গ্রিড। আপনি repeat() ফাংশন দিয়ে দ্রুত CSS-এ গ্রিড লিখতে পারেন। ব্যবহার: repeat(12, 1fr); গ্রিড টেমপ্লেট কলামগুলির জন্য আপনাকে 1fr এর প্রতিটিতে 12টি কলাম দেয়।
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
এখন আপনার কাছে একটি 12 কলামের ট্র্যাক গ্রিড আছে, আপনি গ্রিডে চাইল্ড উপাদান রাখতে পারেন। এটি করার একটি উপায় গ্রিড লাইন ব্যবহার করে তাদের স্থাপন করা হবে। উদাহরণস্বরূপ, grid-column: 1 / 13 প্রথম লাইন থেকে শেষ (13তম) এবং 12টি কলাম পর্যন্ত স্প্যান করবে। grid-column: 1 / 5; প্রথম চার স্প্যান হবে.
এটি লেখার আরেকটি উপায় হল span কীওয়ার্ড ব্যবহার করে। span দিয়ে, আপনি প্রারম্ভিক লাইন সেট করুন এবং তারপর সেই প্রারম্ভিক বিন্দু থেকে কতগুলি কলাম স্প্যান করতে হবে। এই ক্ষেত্রে, grid-column: 1 / span 12 grid-column: 1 / 13 , এবং grid-column: 2 / span 6 grid-column: 2 / 8 এর সমতুল্য।
.child-span-12 {
grid-column: 1 / span 12;
}
এইচটিএমএল
<div class="parent">
<div class="span-12 section coral">Span 12</div>
<div class="span-6 section green">Span 6</div>
<div class="span-4 section yellow">Span 4</div>
<div class="span-2 section blue">Span 2</div>
</div>সিএসএস
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.span-12 {
grid-column: 1 / span 12;
}
.span-6 {
grid-column: 1 / span 6;
}
.span-4 {
grid-column: 4 / span 4;
}
.span-2 {
grid-column: 3 / span 2;
}
/* centering text */
.section {
display: grid;
place-items: center;
text-align: center
}