如何计算我的单元格需要 CSS minmax() 的最小长度？

Question

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

我想将最小长度设置为 space 顶部单元格
将其所有文本 保持在一行 所需的长度。例如：

<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% )

或

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

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

如何计算我的单元格需要 CSS minmax() 的最小长度？

How do I calculate the minimum length my cell needs for my CSS minmax()?

css

css-grid

minmax