grid-template-rows প্রপার্টি

grid-template-rows প্রপার্টিটি গ্রিডে বা গ্রিড সিস্টেমে এলিমেন্টটি দখল করবে এমন সারির সংখ্যা এবং প্রস্থ নির্ধারণ করে। প্রপার্টির মান হিসেবে আমরা যেকোনো আকারের একক-এ সারির প্রস্থ উল্লেখ করি। প্রপার্টিটি প্যারেন্ট এলিমেন্টে উল্লেখ করা হয় এবং চাইল্ড এলিমেন্টগুলোর সারির প্রস্থ নির্ধারণ করে।

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

সিনট্যাক্স

cssসিলেক্টর {
  grid-template-rows: সারির প্রস্থ;
}

উদাহরণ

আসুন আমাদের গ্রিডের এলিমেন্টগুলোর জন্য সারির প্রস্থ নির্ধারণ করি:

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

css#parent {
  display: grid;
  grid-template-rows: 50px 100px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

আসুন প্রথম এবং তৃতীয় সারির জন্য পিক্সেলে ফিক্সড প্রস্থ নির্ধারণ করি, এবং দ্বিতীয় সারি যেন স্বয়ংক্রিয়ভাবে উপলব্ধ স্থান দখল করে:

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

css#parent {
  display: grid;
  grid-template-rows: 100px auto 60px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

এখন grid-template-rows প্রপার্টি ব্যবহার করে এমনভাবে করি যাতে প্রথম এবং দ্বিতীয় সারি কন্টেইনারের এক ভাগ দখল করে, এবং তৃতীয় সারি - তিন ভাগ:

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

css#parent {
  display: grid;
  grid-template-rows: 1fr 1fr 3fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

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

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

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

Результат:

উদাহরণ

আসুন grid-template-rows প্রপার্টিতে repeat() ফাংশন উল্লেখ করি, যা কন্টেইনারকে জানাবে যে সমস্ত তিনটি সারির প্রস্থ সমান হবে:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

এখন আসুন পূর্ববর্তী উদাহরণটি পরিবর্তন করি যাতে তিনটি অভিন্ন সারির সাথে চতুর্থ সারি যোগ হয়, যা কন্টেইনারের দুই ফ্র্যাকশন দখল করবে:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr) 2fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

আসুন প্রথম দুই সারির প্রস্থ কন্টেইনারের এক ফ্র্যাকশন হিসেবে নির্ধারণ করি এবং শেষ দুই সারির - দুই ফ্র্যাকশন হিসেবে:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

এখন আসুন সারির প্রস্থ নির্ধারণ করি repeat() ফাংশন এবং মুক্ত একক fr ব্যবহার করে কম্বিন করে:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

repeat() ফাংশনে auto-fill মানও উল্লেখ করা যেতে পারে, যা আমাদের কন্টেইনারকে আমাদের প্রয়োজনীয় প্রস্থের অভিন্ন সারি দিয়ে পূরণ করবে:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, 50px);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

auto-fill-এর সাথে minmax ফাংশন উল্লেখ করা খুবই সুবিধাজনক, যা সারির প্রস্থের পরিসর নির্ধারণ করে ন্যূনতম থেকে সর্বোচ্চ মান পর্যন্ত। যদি কন্টেইনারের প্রস্থ সমস্ত সারি ধারণ করতে না পারে, তবে তাদের কিছু নতুন লাইনে চলে যাবে, এবং লাইনের সারিগুলি সেখানে সমানভাবে বিতরণ হবে। আসুন পরিবর্তন করি পূর্ববর্তী উদাহরণ, এতে minmax ফাংশন উল্লেখ করে:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

এখন আসুন auto-fit প্রপার্টি উল্লেখ করি, যা auto-fill থেকে আলাদা এই意义上 যে, এটি সারির সংখ্যা উপলব্ধ কন্টেইনার প্রস্থের সাথে মেলে, সেগুলো প্রসারিত বা সংকুচিত করে:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

fr-এর পাশাপাশি %-এ মানও ব্যবহার করা যেতে পারে, যেটিও নির্ধারণ করে কন্টেইনারের কোন অংশ সারিটি দখল করবে। এক্ষেত্রে প্রথমে %-এ সারির আকার গণনা করা হবে, এবং অবশিষ্ট মুক্ত স্থান ফ্র্যাকশনে বিভক্ত হবে:

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

css#parent {
  display: grid;
  grid-template-rows: 50% 1fr 2fr 30%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

আসুন একসাথে প্রপার্টি ব্যবহার করি grid-template-columns এবং grid-template-rows:

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-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

আসুন প্রপার্টি ব্যবহার করে grid-template-columns এবং grid-template-rows নয়টি সেল বিশিষ্ট একটি টেবিল তৈরি করি, সাজানো তিন সারিতে।而且 দ্বিতীয় এবং তৃতীয় সারির প্রস্থ সমান হবে, এবং প্রতিটি কলাম - বিভিন্ন প্রস্থের হবে:

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-rows: 60px 1fr 60px;
  grid-template-columns: 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

এখন পূর্ববর্তী উদাহরণের টেবিলে উপরের সারির প্রস্থ দুই ফ্র্যাকশন করি, এবং প্রথম কলাম - আধা ফ্র্যাকশনে:

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-rows: 2fr 1fr 1fr;
  grid-template-columns: 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

আরও দেখুন