html - 划分列数不确定的网格

我想用一个列数不确定的网格来划分。
一个例子：

grid-template-columns：重复（自动填充，90px）；

创建了许多列，但我不知道有多少列。
我想知道是否有一种方法可以按比例填写这些列。
比方说：

.whatever-1 { // would take up 2/3 of the grid columns}

和

.whatever-2 { // would take up 1/3 of the grid columns}

但是我什至没有答案。请帮我一下。
这只是我帮助我解释问题的一个示例。

.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>

最佳答案

如果要将其分为1/3和2/3，则意味着第一个等于第二个宽度的一半，因此我们有一个2x关系。在这种情况下，只需使其中一个跨两列，而无需定义任何列模板：

.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>

关于html - 划分列数不确定的网格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58380852/