Как рассчитать минимальную длину, в которой нуждается моя ячейка для CSS minmax ()?

Question

Я пытаюсь создать несколько CSS-сеток.

Я хочу установить МИНИМАЛЬНУЮ длину, равную количеству пространства, необходимого верхней ячейке
, чтобы весь ее текст оставался в одной строке . Например:

<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 .