Design comparison
Solution retrospective
The style of it, I will use grid-template-column next time so it will be easier.
What challenges did you encounter, and how did you overcome them?The styling of the page, i overcome it by searching a little bit on the internet for "grid-template-columns" and "grid-template-rows"
What specific areas of your project would you like help with?Making the code more efficient
Community feedback
- @3laagaberPosted 4 months ago
Hello, you did quite good work, here are tips to improve your design, try to use grid-template-areas it is straightforward and useful in such grid complex structure like this: .container{ max-width: 80%; max-height: 90%; gap: 2rem; display: grid; grid-template-columns: repeat(12 ,1fr) ; grid-template-rows: repeat(2, 1fr); grid-template-areas: "one one one one one one two two two three three three" "four four four five five five five five five three three three" ; } @media (max-width:600px){ .content{ height: 200vh; } .components{ display: grid; grid-template-columns: repeat(2 ,1fr) ; grid-template-rows: repeat(5, 1fr); grid-template-areas: "one one " "two two" "four four" "five five" "three three"
; }} I wish you all well.
0
Please log in to post a comment
Log in with GitHub
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