CSS গ্রিডে fr ইউনিট

গ্রিডে সারি এবং কলামের আকার শুধুমাত্র px-এ নয়, নমনীয়তার একক fr (ভগ্নাংশ) দিয়েও সেট করা যেতে পারে। এই ইউনিটগুলি ব্যবহার করার অর্থ হল, উপাদান স্থাপনের জন্য সমস্ত স্থান সমান ভাগ বা ভগ্নাংশে বিভক্ত হবে। প্রতিটি উপাদান এই বিভাজনের একটি নির্দিষ্ট অংশ নিতে সক্ষম হবে। আসুন দেখি, এটি কীভাবে করা হয়।

আসুন grid-template-columns বৈশিষ্ট্য ব্যবহার করে এটি করি যাতে গ্রিডের প্রথম এবং দ্বিতীয় কলাম কন্টেইনারের একটি অংশ দখল করে, এবং তৃতীয় কলামটি তিনটি অংশ দখল করে:

html<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>

css#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;
}

Результат: