Design comparison
Solution retrospective
I'm most proud of the grid-template: repeat(4, auto) / repeat(1, 16rem), which uses this method to bring the desktop design closer to the original.
What challenges did you encounter, and how did you overcome them?I encountered grid-template: repeat(4, auto) / repeat(1, 16rem) not adapting to mobile when adjusting the property for mobile, and I solved it using Flexbox.
What specific areas of your project would you like help with?I would like to know why the following code grid-template: repeat(4, auto) / repeat(1, 16rem) Didn't work when I adjusted the 16 rems to adapt to screen sizes to mobile stacking in a column. I had to use Flexbox instead of mobile to accomplish it.
Community feedback
- @WlfernandoPosted about 1 month ago
I had the same problem with the short-hand grid-template using the function
repeat(). It just say is invalid. You also encounter the same problem so I investigated it. It says in mdn: Note: The repeat() function isn't allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the "ASCII art". So, if you want to continue using repeat, use grid-template-[rows or columns] or omit the function in the short-hand grid-template.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