2-column grid set to 1FR/1FR not resizing evenly

So I have a 2-column grid where each column is set to 1FR, yet when the width of the viewport changes, the columns stop resizing evenly at a certain point.

I suspect that something about an SVG graphic in the left may be the culprit, but since all width settings throughout are set to “Auto,” I can’t figure what the cause may be or how to correct it.

Here is a one and a half minute video demonstrating the issue: https://www.loom.com/share/1e61f186600242c4b47aa0abcbce219d

If anyone could shed a light on the cause of the issue and its solution, I would be grateful.


Here is my site Read-Only:

1fr width for grid items (1fr 1fr) - is not like saying “No matter what be 50% of the screen” (This is true if the grid-items without content - but with content the default value of the col/row is auto).

For this idea you should use “min/max”` (With/without overflow)


Read more her (Also google it):

4 cols of 1FR - and image 400px width inside item1.


Related concept:


Thank you very much, @Siton_Systems, for taking the time to provide really excellent, detailed advice that solved the issue and helps educate me as well, I appreciate it.

1 Like