Design comparison
Solution retrospective
This is my attempt for a solution to the News Homepage challenge.
I really know absolutely nothing about javascript so I followed this tutorial on how to make the menu work.
Of course all suggestions are very welcome but I have one question about the CSS grid:
- Is it possible to add different size gaps between grid elements? I used mainly margins because the design had gaps of various sizes.
As always thank you to anyone who takes the time to look and correct my code.
Community feedback
- @CaioCoutoPosted over 1 year ago
Hello, there.
Even without knowing JavaScript, you got it to work. Nice job on your solution!
About you question, according to this answer on StackOverflow: "[...] you cannot apply different widths to different gaps. [...] You could use margins (or padding) to show extra space, but this doesn't actually change the width of the gap. It only expands the row."
On the other hand, you can set different
gapvalues to rows and columns individually. For example:row-gap: 1remsets a1remgap between all the rows.column-gap: 1remsets a1remgap between all the columns.gap: 1rem 1rem //gap: row-gap column-gapdoes the same as the other two, but in one line.
I hope this information was helpful in some extent. :)
Marked as helpful0
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