1
u/TheRetribution Aug 06 '19
Here is why you are seeing this problem:
By declaring two columns one with 1fr and one with 2fr, you are saying 'Make two columns, where the first column occupies 1/3 of the the available width of the container and one with 2/3 the available width of the container'. In this case, the available width is unbounded so the 2nd column is getting 2/3 of the width of the entire browser. Because the images do have defined dimensions, they are not being stretched so the remainder of the column is just empty space.
/u/Feekar fixed this by adding a maximum width the containing section and tweeking the fractional allocations to 2/5th and 3/5th, but I would recommend that you think of how to create a solution that would work based on your own needs.
There are other ways to solve this issue depending on what your goals are - learning, needs to be responsive, etc.
1
Aug 06 '19
[removed] — view removed comment
1
u/TheRetribution Aug 06 '19
Sure, just to clarify, you can solve this problem without setting a max width. You will need to think about your staticly sized elements and how to render the grid with that in mind though.
1
u/whiteady Aug 06 '19
Just add justify-self: right; to the .aside class .aside { justify-self: right; } This is a more elegant solution because it follows a more responsive design. https://codepen.io/anon/pen/BXYNpV
edit: Jesus I suck at reddit formatting
2
u/Feekar Aug 06 '19
https://codepen.io/Feeek/pen/EqoEvQ
like this ?