Can you have unequal widths in auto-fit grids?


I’m trying to make custom columns with two conditions:

  • The ratio between them must be 44% - 56 %
  • Below a defined width, there is only one column.

I have decided that below 560px for the second element (so 440px for the first one), the elements must be wrapped into one column only.

However, if I want to use auto-fit, I have to use only one column, or the other one must have a fixed width, which isn’t right in my case.

So you can’t have unequal ratio set in the grid colums.

I’ve tried to fix the width of my grid content, with a min-width: 35rem (35 rem which converts to 560px) but instead of taking a new row, it overflows.

If you want to help me, check the last section of this webflow site.

Maybe this isn’t the right approach. In the previous sections of the same site, I’ve tried using flexboxes, but I ran into another issue.