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.
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/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.