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

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

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

সিনট্যাক্স

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

উদাহরণ

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

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-column: 1 / 2;
}
#elem2 {
  grid-column: 1 / 3;
}
#elem3 {
  grid-column: 1 / 4;
}

Результат:

উদাহরণ

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

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-column: 1 / -2;
}
#elem2 {
  grid-column: 1 / -3;
}
#elem3 {
  grid-column: 1 / -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: 1 / 2;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 3 / 4;
}
#elem4 {
  grid-column: 1 / 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: 1 / 4;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 1 / 2;
}
#elem4 {
  grid-column: 3 / 4;
}

Результат:

উদাহরণ

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

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;
}

Результат:

আরও দেখুন