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

Результат: