CSS গ্রিডে কলাম সংযুক্তকরণ

একইভাবে 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;
  padding: 10px;
  border: 2px solid #696989;
  width: 400px;
  height: 300px;
}
#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;
}

Результат: