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

Question

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

grid-template-columns: repeat(auto-fill, 90px);

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

.whatever-1 {
//将占用 2/3 的网格列
}

和

.whatever-2 {
//将占用 1/3 的网格列
}

但我离答案还很远。请帮帮我。这只是我为了帮助解释我的问题而做的一个例子。

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