grid-row বৈশিষ্ট্য

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

সিনট্যাক্স

cssসিলেক্টর {
  grid-row: প্রারম্ভিক অবস্থান / চূড়ান্ত অবস্থান;
}

উদাহরণ

গ্রিডে উপাদানগুলির জন্য প্রারম্ভিক এবং চূড়ান্ত অবস্থান নির্ধারণ করা যাক:

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;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
}

Результат:

উদাহরণ

এখন grid-row বৈশিষ্ট্যে ঋণাত্মক সংখ্যা নির্দেশ করা যাক:

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;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: -1 / -2;
}
#elem2 {
  grid-row: -2 / -3;
}
#elem3 {
  grid-row: -3 / -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: 1 / 3; /* দুটি সারি */
}
#elem2 {
  grid-row: 1 / 2;
}
#elem3 {
  grid-row: 2 / 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: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
}
#elem4 {
  grid-row: 1 / 4;
}

Результат:

উদাহরণ

grid-row বৈশিষ্ট্য এবং grid-column বৈশিষ্ট্য সংমিশ্রণ করা যাক:

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 1fr;
  border: 2px solid #696989;
  padding: 10px;
  height: 300px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 3;
}
#elem2 {
  grid-row: 1 / 2;
}
#elem3 {
  grid-row: 1 / 2;
}
#elem4 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

Результат:

উদাহরণ

এখন এমন করা যাক যাতে প্রথম এবং পঞ্চম ব্লকগুলি সম্পূর্ণ সারি দখল করে, এবং দ্বিতীয় ব্লক - দুটি সারি এবং দুটি কলাম, এবং তৃতীয় এবং চতুর্থ ব্লক - একটি সারি এবং দুটি কলাম:

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 id="elem5">5</div>
</div>

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

Результат:

আরও দেখুন