CSS গ্রিডে fr ইউনিট
গ্রিডে সারি এবং কলামের আকার শুধুমাত্র px-এ নয়,
নমনীয়তার একক fr (ভগ্নাংশ) দিয়েও সেট করা যেতে পারে।
এই ইউনিটগুলি ব্যবহার করার অর্থ হল,
উপাদান স্থাপনের জন্য সমস্ত স্থান সমান ভাগ
বা ভগ্নাংশে বিভক্ত হবে। প্রতিটি উপাদান এই বিভাজনের
একটি নির্দিষ্ট অংশ নিতে সক্ষম হবে। আসুন দেখি,
এটি কীভাবে করা হয়।
আসুন grid-template-columns বৈশিষ্ট্য ব্যবহার করে
এটি করি যাতে গ্রিডের প্রথম এবং দ্বিতীয় কলাম
কন্টেইনারের একটি অংশ দখল করে,
এবং তৃতীয় কলামটি তিনটি অংশ দখল করে:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
ধরুন আপনার গ্রিডে দুটি কলাম আছে। সেগুলির প্রস্থ একই করুন।
ধরুন আপনার গ্রিডে তিনটি কলাম আছে। সেগুলির প্রস্থ একই করুন।
ধরুন আপনার গ্রিডে তিনটি কলাম আছে। তৃতীয় কলামটি প্রথম এবং দ্বিতীয় কলামের দুই গুণ বড় করুন।
