grid-row-end প্রোপার্টি

grid-row-end প্রোপার্টি গ্রিডে সারি বরাবর এলিমেন্টের শেষ অবস্থান নির্দিষ্ট করে। প্রোপার্টির মান হতে পারে ধনাত্মক বা ঋণাত্মক সংখ্যা। যদি আমরা ধনাত্মক সংখ্যা নির্দিষ্ট করি, তাহলে এলিমেন্টের শুরু অবস্থান উপরে থেকে নিচের দিকে গণনা করা হয়। ঋণাত্মক সংখ্যা নির্দিষ্ট করলে এলিমেন্ট বিপরীত ক্রমে অবস্থান করবে, অর্থাৎ নিচ থেকে উপরের দিকে।

সিনট্যাক্স

cssসিলেক্টর {
  grid-row-end: ধনাত্মক বা ঋণাত্মক সংখ্যা;
}

উদাহরণ

আসুন গ্রিডে এলিমেন্টগুলোর জন্য শেষ অবস্থান নির্দিষ্ট করি:

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

css#parent {
  display: grid;
  padding: 10px;
  width: 400px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row-start: 1;
  grid-row-end: 2;
}
#elem2 {
  grid-row-start: 2;
  grid-row-end: 3;
}
#elem3 {
  grid-row-start: 3;
  grid-row-end: 4;
}

Результат:

উদাহরণ

প্রথম ব্লকটি যেন দুইটি সারি দখল করে তা করা যাক:

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

css#parent {
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 300px;
  width: 400px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row-start: 1;
  grid-row-end: 3;
}
#elem2 {
  grid-row-start: 1;
  grid-row-end: 2;
}
#elem3 {
  grid-row-start: 2;
  grid-row-end: 3;
}

Результат:

উদাহরণ

এখন চতুর্থ ব্লকটির জন্য তিনটি সারি নির্দিষ্ট করা যাক:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 300px;
  width: 400px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row-start: 1;
  grid-row-end: 2;
}
#elem2 {
  grid-row-start: 2;
  grid-row-end: 3;
}
#elem3 {
  grid-row-start: 3;
  grid-row-end: 4;
}
#elem4 {
  grid-row-start: 1;
  grid-row-end: 4;
}

Результат:

উদাহরণ

এবার grid-row-start এবং grid-row-end প্রোপার্টিতে ঋণাত্মক সংখ্যা নির্দিষ্ট করা যাক। এখন elem3 সবচেয়ে উপরের সারি দখল করবে, এবং elem1 - সবচেয়ে নিচের সারি:

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

css#parent {
  display: grid;
  padding: 10px;
  width: 400px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row-start: -1;
  grid-row-end: -2;
}
#elem2 {
  grid-row-start: -2;
  grid-row-end: -3;
}
#elem3 {
  grid-row-start: -3;
  grid-row-end: -4;
}

Результат:

আরও দেখুন