fr ইউনিট

ফ্লেক্সিবল ইউনিট fr একটি ভগ্নাংশ বা অংশ বোঝায় মোট স্থানের আকারের, যেখানে উপাদানটি অবস্থিত। ব্যবহারের সুবিধা fr হল এর অভিযোজনযোগ্যতা বিভিন্ন কন্টেইনার বা স্ক্রিন রেজোলিউশনের জন্য, কারণ 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>

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

fr ইউনিটে নির্দিষ্ট করা মানগুলি ভগ্নাংশ আকারে নেওয়া যেতে পারে। চলুন আগের উদাহরণটি পরিবর্তন করি, দ্বিতীয় এবং তৃতীয় কলামের প্রস্থ নির্দিষ্ট করে ভগ্নাংশ সংখ্যায়:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 1fr 0.5fr 2.5fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

আরও দেখুন