Resolved: CSS vertical align with different image heights

Question:

I’m trying to vertically align the items in the first row for all possible image heights:

See here: https://lawncarepro.co.uk/code-test/
I have tried the solutions listed here How to vertically align an image inside a div including:

• Setting .p-c to inline-block with height: 100%; and using vertical align middle on all three columns in the first row
• Doing the above but with a new div for the first row
• Using position: relative; and position: absolute; (this generally pushes things out of the box or changes the column order)
• Using position: relative; top: 50%; transform: translateY(-50%); on the columns in the first row

Answer:

I would suggest going with CSS-Grid (and make changes as required):
I quickly played around the code and came up with this.
Please Note: One of the div’s is empty. So, you can manually set the display:none; if required. And align items are required. With Grids there are too many ways to layout our HTML. Just do some R&D 🙂

If you have better answer, please add a comment about this, thank you!