Design comparison
SolutionDesign
Solution retrospective
I'm happy With this challenge i become understand grid 100% , I like this challenge the solution is : in version pc : give this to father tag of section or article in my code is main : display: grid;
main{
max-width: 1100px;
grid-template-columns: repeat(4,25%);
grid-template-areas: "article1 article1 article2 article5"
"article3 article4 article4 article5"
;
}
in version mobile will be :
@media (max-width :767px){
main{
grid-template-areas: "article1" "article2" "article3" "article4" "article5";
display: grid;
grid-template-columns: repeat(1,100%);
}
}
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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