Is there a way to make a responsive grid if the columns are not the same size without using media queries?

Question

I am making a webpage which is primarily made of grids, some being inside other grids. I am having trouble making it responsive. My main grid #content has two columns with the following size:

grid-template-columns: 3fr 1fr;

Inside, there is another grid called #pages. I was able to successfully make this one resize depending on screensize using repeat, auto-fit, and minmax:

#pages>div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
}

My problem is that I want #content to be two columns with the size 3fr and 1fr on a desktop, but on a smaller screen size I want it to collapse into a single column. Unfortunately, as they are not the same size as with the #pages example, I don't know what the best way to make them responsive is. Is there a way to do this without media queries? What is the best way to achieve this?

I wrote the code pen with my progress so far where #pages works as intended but #content does not:

https://codepen.io/georgeciesinski/pen/vYrXrwb

Answer 1

Not sure it's the best solution, but I think this is a good use-case for flexbox.

Make your #container wrap and you can set the minimum widths using the flex shorthand, which will translate almost directly over as:

flex: 3;

and

flex: 1;