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: 600px;
}
#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: 600px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

সারির আকার নির্দিষ্ট করতে 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: 600px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ

সারিগুলোর উচ্চতা 50px নির্ধারণ করি, এবং সারির সংখ্যা 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;
}

Результат:

ব্যবহারিক সমস্যা