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

Design help General
1

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: Loom | Free Screen & Video Recording Software | Loom

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

Thanks.

Here is my site Read-Only:
https://preview.webflow.com/preview/drumming-patterns?utm_medium=preview_link&utm_source=designer&utm_content=drumming-patterns&preview=3cd0bca9a14ce09d070530b8f8a5c1d6&mode=preview

2

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)

image

Read more her (Also google it):

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

image
image964×303 82.4 KB

https://university.webflow.com/article/the-fr-unit#min/max

Related concept:

3 Likes
3

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