CSS网格：在特定x位置开始的列

Question

我正在尝试实现具有三列的CSS网格布局：列A和B始终等于某个宽度，以使列C从相同的位置开始，除非A和/或B中的内容变得太宽。

或者用另一种方式描述：如果A变大，则从B中取出所需的额外宽度，而不是将B和C都向右移动。

或者，A和B是否可以放在同一列中但可以内联显示？

我知道这可以通过将A和B包装在另一个容器元素中来实现，但是可以仅使用CSS网格吗？

|<--A-->|<---B--->|<-------C------->|

where:
A + B + C = 100%
A + B = min(30em)
A = min(18em)

Answer 1

您可以考虑在A和B列上都放置一个额外的隐藏元素，并在其上定义一个min-width。这有点棘手，但我们的想法是，两列的宽度都应服从A和B与隐藏元素的约束。