Submitted over 1 year ago

Mobile First News Homepage

Dimitar Radev• 930

@Mitko90

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

News homepage

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

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

Caio Couto• 150

@CaioCouto

Posted 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 gap values to rows and columns individually. For example:

row-gap: 1rem sets a 1rem gap between all the rows.
column-gap: 1rem sets a 1rem gap between all the columns.
gap: 1rem 1rem //gap: row-gap column-gap does the same as the other two, but in one line.

I hope this information was helpful in some extent. :)

Marked as helpful

Please log in to post a comment

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