Submitted almost 2 years ago

Four-Card Feature

@Ontologeist

A solution to the Four card feature section challenge

Solution retrospective

I would like to figure out how to have the cards laid out in the same way as the original (two stacked in the middle while the outer two are centered between them). Could anyone provide some hints or a solution?

Any other feedback or best practices is certainly welcome! Thanks!

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Mikhail•440

@MikeBeloborodov

Posted almost 2 years ago

Hello! Nicely done work, good job! Regarding your question:

You can use grids for this task. It's just 3 columns and 2 rows. The first and the last column take 2 rows at the same time and the middle column has 2 rows and 2 cards in it. For example:

grid_container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* we make 3 equal columns here */
grid-template-rows: 1fr 1fr; /* 2 equal rows */
}

card_1 {
grid-row: 1/3; /* the first card spans from the first line to the 3rd line and so it takes two cells of the grid */
}

card_4 {
grid-row: 1/3; /* same thing but for the last card */
}

Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord