Four card feature section (CSS Grid & CSS Variables)

To recreate the desktop design in Flexbox, I used 3 container divs for the cards: the first around “supervisor”, the second around both “team builder” and “karma”, and the third around “calculator”.

These three were inside an outer card container for the entire section to control flex-direction between layouts. On mobile, the outer card container is set to column. On desktop, it’s set to row. If you then set align-items: center to the outer card container, the cards should appear as they do in the desktop design - although you may have to add some margins or flex-gap to get the spacing right.

well in this case you can solve it with a pretty simple grid.

Just view each iteam as a 2x2 grid container. then your grid may have 4 row and 6 colums. you will have some like this.

empty empty teambuilder teambuilder empty empty supervisor supervisor teambuilder teambuilder calculator calculator supervisor supervisor karma karma calculator calculator empty empty karma karma emprty empty

hope it helps =P