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

Question

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

网格模板列：重复（自动填充，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>

Answer 1

如果你想把它分成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>