I achieved this result by giving cards in the right side of grid a Relative position with 25% at top. This works great except if the last card in the section is on the right; as you can see it ends up overlapping the section below.
I tried using margin and padding but then the offset doesn’t work on the left side:
Is there a way I can achieve an offset layout while maintaining the correct spacing on the bottom of the section whether or not the cards end of the left or right?
Would something like row spans on the cards with the an empty div placed in the first right side grid block work?
Instead of basing the offset on card height %, base it on em, rem, or px.
Then use the same measure as a margin-bottom on the grid or a padding-bottom on the grid wrapper itself ( to account for background styling ).
You can use a var to keep these in sync.
If you have more complex variations, e.g. 3 col on desktop, 1 on mobile portrait, I’d probably use custom CSS rather than the inbuilt even/odd-item selector so that you can get very precise CSS selector control.
Use CSS grid grid-auto-rows with minmax() and give every second card a margin-top instead of relative positioning , that way the last card still respects section spacing. I’ve fixed this before by also adding grid-row: span 2 to “taller” cards when needed instead of empty divs.
@memetican thanks… your solution more or less works. If the content of any one card is significantly longer than the others then the space between cards in the adjacent column becomes noticeably larger than the rest but as long as I keep content fairly consist this works.
