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

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

সিনট্যাক্স

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

উদাহরণ

আসুন গ্রিডে উপাদানগুলিতে প্রারম্ভিক অবস্থান নির্ধারণ করি:

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

Результат:

উদাহরণ

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

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

Результат:

উদাহরণ

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

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

Результат:

আরো দেখুন