Question

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

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>

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>

划分列数不确定的网格

1 个答案: