Plain CSS solution, help needed

in my perspective: 2 options:

• the grid display option with 3 columns for the cards.
• the flex display option with the default row direction. the second and the third card would have to be on the same <div> with (flex-direction: column;) for the flex.

OR you could use (align-self: center;) for the first and last cards.

Both 2 methods are the easiest for ME, and I prefer the Grid option as well.

Great job thou.. I love your code and I like the use of (.center) on your HTML.

Hello Erwin, you can position the cards using CSS grid!

On the desktop version you'll see there are 3 columns of equal size. Then there are what might appear to be 3 rows but in reality there are only 2, the cards on the side start at the first row but span 2, they are then centered. On the mobile version there's only one column so you can change the grid accordingly.

I hope this was helpful, take a look at my solution if you need any pointers.

Here is a pen I made with the layout you want to achieve and also a video with an excellent explanation of the Grid.

https://codepen.io/davidfcopozo/pen/LYdmRJR https://www.youtube.com/watch?v=duH4DLq5yoo&ab_channel=KevinPowell

...................................................................................................................................................................................................................................................................

You deed good and you can do it without even using flex.

• All you have to do is use transform: translateY(50%) to first & second card, When screen size is above 1024px.
• I have made this design without Flex & Grid. Check my solution.