Responsive Four Card Feature Section using HTML5 & CSS3

Solution retrospective
If anyone have any suggestions on how to achieve the cross-section layout for this challenge much easier/more efficient, please don't hesitate to let me know (I struggled with this part for quite some time) :D
Please log in to post a comment
Log in with GitHubCommunity feedback
- @12Kentos
Hey @KaydenGiang2512
Nice job on finishing this challenge! I thought your solution on how to get the cross section to work was really interesting, and not something I probably would have thought of. :) the way I did it was really similar to what you did, but instead of this code
grid-template-rows: repeat(2, auto);
I had it repeat 4 instead of 2. That way I could get the first box to span with the following code
grid-area: 2 / 1 / 4 / 2;
without having to translate it. If you need any help with getting used to grid, here is a great interactive site I used that really helped me get the basics down.
Let me know if you have any other questions!
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