DEV Community 👩‍💻👨‍💻

Discussion on: Diamond Card Layout with CSS

davwheat profile image
David Wheatley

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.

veedjohnson profile image
Veed - The Hood Developer Author

Thank you for this I'll give it a try😁👍🏾 of course there is never one way to solve a problem.