如何计算CSS minmax（）的单元格所需的最小长度？

Question

我正在尝试设计一些CSS网格。

我想将MINIMUM长度设置为顶部单元格
将其所有文本保留在一行中的空间量。 例如：

<h2 id="dominantCell">This is some text</h2>
<style>
    #dominantCell {  /* I don't know how long the text is in one line */
       grid-template-columns: minmax( /* <h2>'s width */ , 100%)
    }    /* How do I find out what the min should be WITHOUT counting pixels? */
</style>

我如何合理地计算这样的数据而不每次都计算像素？

Answer 1

尝试一下：

grid-template-columns: minmax( min-content, 100% )

OR

grid-template-columns: minmax( min-content, 1fr )

有关min-content的详细信息，请参见MDN。