four-card-feature-section-master

Hey @AymaneOnline,

It is totally possible to complete this solution using display: grid.

How does it work

• You need to flatten each card inside it HTML structure instead of grouping 2 cards inside a div in the middle.
• After setting display: grid on cards container, you can manipulate each card's position on the grid with grid-column, grid-row. For example if i want to change .first-card row position:

.first-card {
     /* position at row from 2, end at 3 (same to grid-column)*/
    grid-row: 2/3;
}

• To align each card in it's zone (grid divided zone), use align-self, justify-self.

You can check out my solution for this challenge for more references.

Play around these properties above and let me know if you need further example!