CSS গ্রিডে কলাম ওভারল্যাপ

যে পরিস্থিতিতে একাধিক এলিমেন্ট একই কলাম দখল করে, সেখানে তাদের ওভারল্যাপ পরিলক্ষিত হতে পারে, যেখানে প্রতিটি পরবর্তী এলিমেন্ট একটি সারি নিচে সরে যায়।

আসুন আমাদের গ্রিডে এমন ব্যবস্থা করি যাতে প্রথম এলিমেন্টটি প্রথম সারিতে অবস্থান করে, দ্বিতীয়টি - দ্বিতীয় সারিতে, এবং তৃতীয় ও চতুর্থ - তৃতীয় সারিতে:

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

Результат: