[使用适合内容时]，百分比如何在最小宽度的网格项目中起作用？

Question

目标

• 具有CSS网格容器

• 具有3个由fit-content（33.33％）计算的列，以获取大小相等的列

• 能够通过在单个网格项上使用最小/最大宽度来进一步控制/限制列大小

特别是在只有2个网格项的情况下，我想将列的大小从33％调整为50％，使用最小宽度。

下面的代码段符合以上目标。

.grid {
  width: 780px;
  display: grid;
  grid-template-columns: repeat(3, fit-content(33.33%));
  justify-items: start;
  align-items: stretch;
  border:1px solid #000;
}

.cell {
  min-width:calc(780px / 2);
  height:80vh;
  background: radial-gradient(
    circle,
    rgba(63, 94, 251, 1) 0%,
    rgba(252, 70, 107, 1) 100%
  );
}

<div class="grid">
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
</div>

问题是我使用了一个明确的值：min-width:calc(780px / 2)。

所以我尝试使用百分比，例如min-width:calc(100% / 2)。但似乎网格项目中的百分比是相对于其自身宽度而不是不是容器宽度的。

因此，我尝试了以下操作：min-width:calc(300% / 2)，认为如果100％是1个网格项目的宽度，且其适合内容为1/3，则300％/ 2相对于最小宽度大约为50％容器的宽度。

但是使用这样的百分比会使项目重叠：

.grid {
  width: 780px;
  display: grid;
  grid-template-columns: repeat(3, fit-content(33.33%));
  justify-items: start;
  align-items: stretch;
  border:1px solid #000;
}

.cell {
  min-width:calc(300% / 2);
  height:80vh;
  background: radial-gradient(
    circle,
    rgba(63, 94, 251, 1) 0%,
    rgba(252, 70, 107, 1) 100%
  );
}

<div class="grid">
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
</div>

所以我的问题是：是否可以在网格项目的最小宽度中使用百分比，相对于容器的宽度？怎么样？

Answer 1

您的计算是正确的，min-width与百分数一起使用是相对于网格容器的33%已经定义的网格单元，因此您需要300%/2才能拥有50% BUT您将溢出33%定义的网格单元。要解决此问题，您可以考虑将margin-right添加到第二个元素中以将其推送，因为第二个单元格始于33%而不是50%，而不是您认为是由于溢出而引起的。

保证金应等于50%的{​​{1}}，即50%的{​​{1}}，因此容器的33%也是16.5%，如下图：

50% - 33%

.grid {
  width: 780px;
  display: grid;
  grid-template-columns: repeat(3, fit-content(33.33%));
  justify-items: start;
  align-items: stretch;
  border:1px solid #000;
}

.cell {
  min-width:calc(300% / 2);
  height:80vh;
  background: radial-gradient(
    circle,
    rgba(63, 94, 251, 1) 0%,
    rgba(252, 70, 107, 1) 100%
  );
}
.cell:nth-child(2) {
  margin-left:50%;
}

Answer 2

这会为您工作吗？

to_alay = ''.join(vocab.get(char, char) for char in word)

.grid {
  width: 780px;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-auto-flow: row;
  justify-items: start;
  align-items: stretch;
  border: 1px solid #000;
}

.cell {
  height: 80vh;
  background: radial-gradient(
    circle,
    rgba(63, 94, 251, 1) 0%,
    rgba(252, 70, 107, 1) 100%
  );
}