বৈশিষ্ট্য grid-column-end

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

grid-column-end বৈশিষ্ট্যের একটি গুরুত্বপূর্ণ দিক হল এটি যে নির্দিষ্ট কলাম নম্বর দেয় তা অন্তর্ভুক্ত নয় উপাদানের শেষ অবস্থানে - যদি আমরা 3 সংখ্যা নির্দিষ্ট করি, তবে উপাদানটি শুধুমাত্র প্রথম এবং দ্বিতীয় কলাম দখল করবে।

সিনট্যাক্স

cssসিলেক্টর {
  grid-column-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;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

#elem1 {
  grid-column-start: 1;
  grid-column-end: 2;
}
#elem2 {
  grid-column-start: 1;
  grid-column-end: 3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: 4;
}

Результат:

উদাহরণ

এখন grid-column-start বৈশিষ্ট্য ব্যবহার করে এটি করা যাক, যাতে প্রথম, দ্বিতীয় এবং তৃতীয় উপাদান প্রথম সারিতে অবস্থান করে। এবং চতুর্থ উপাদান সম্পূর্ণ দ্বিতীয় সারি দখল করবে:

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

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

Результат:

উদাহরণ

এখন আসুন grid-column-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;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

#elem1 {
  grid-column-start: 1;
  grid-column-end: -4;
}
#elem2 {
  grid-column-start: 1;
  grid-column-end: -3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: -2;
}

Результат:

আরও দেখুন