How can I get the gap between my grid elements smaller?
I'm working on a project for college and I have an article and an aside which are in a grid so they appear next to each other like the reference provided (see image 1). However there is a massive gap between my elements and I can't figure out how to reduce it down to about 1 rem (see image 2).
I have provided my code in this JSFiddle: https://jsfiddle.net/64huL0wa/
How can I fix this? Thanks
grid problem - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
2 Replies
you have a massive margin set on the grid children (article and aside elements) use column-gap instead to make the gap
That makes sense, I put those margins on the grid children before I set their parent to grid and I guess I just forgot to remove the margins. Thanks man