This could be done much simpler. Place all the cards as siblings in the DOM, then, on the parent container, set display: grid along with grid-template-columns: 1fr 1fr 1fr and grid-template-rows: 1fr 1fr.
Use .parent :first-child, .parent :last-child to set grid-row: 1 / 3 to span across the rows.
This should be (about) right. Might need to configure some align-items: center or similar.
This has the added benefit of easily manipulating the grid layout when the viewport gets bigger or smaller.
This could be done much simpler. Place all the cards as siblings in the DOM, then, on the parent container, set
display: gridalong withgrid-template-columns: 1fr 1fr 1frandgrid-template-rows: 1fr 1fr.Use
.parent :first-child, .parent :last-childto setgrid-row: 1 / 3to span across the rows.This should be (about) right. Might need to configure some
align-items: centeror similar.This has the added benefit of easily manipulating the grid layout when the viewport gets bigger or smaller.
Thank you for this I'll give it a try😁👍🏾 of course there is never one way to solve a problem.