Divide a grid with an undetermined number of columns - html

Question

I would like to divide a grid with an undetermined number of columns.
An example:
grid-template-columns: repeat(auto-fill, 90px);
A number of columns are created, but I don't know how many.
I would like to know if there is a way to fill out these columns proportionally.
Let's say:
.whatever-1 {
// would take up 2/3 of the grid columns
}
and
.whatever-2 {
// would take up 1/3 of the grid columns
}
But I am not even close to the answer. Please give me a hand.
This is just an example that I did to help me to explain my problem.
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 90px);
width: 100%;
height: 100vh;
color: white;
}
.whatever-1 {
grid-column: 1 / span 2;
background-color: blue;
}
.whatever-2 {
grid-column: 3 / span 5;
background-color: red;
}
<div class="container">
<div class="whatever-1">Whatever 1</div>
<div class="whatever-2">Whatever 2</div>
</div>

Answer 1

If you want to divide it into 1/3 and 2/3 then it means that the first one will be equal to half the width of the second one thus we have a relation of 2x. In this case simply make one of them span two columns without the need of defining any column template:
.container {
display: grid;
grid-auto-flow:column;
height: 100vh;
color: white;
}
.whatever-1 {
background-color: blue;
}
.whatever-2 {
grid-column: span 2;
background-color: red;
}
<div class="container">
<div class="whatever-1">Whatever 1</div>
<div class="whatever-2">Whatever 2</div>
</div>