Javascript и css синтаксис, как определить 'px'

Question

У меня очень простая проблема с синтаксисом, которую я не могу понять. У меня есть следующие правильные строки кода:

gridTemplateColumns: '100px 100px 100px',
height: Math.max(65, 200) + 'px',

Теперь я хочу добавить Math.max (x, x) во все три параметра gridTemplateColumns: '100px 100px 100px.

Вот те, которые я пробовал, но они просто неверны:

gridTemplateColumns: Math.max(100, 50) Math.max(100, 50) Math.max(100, 50)+'px',
gridTemplateColumns: Math.max(100+'px', 50+'px') Math.max(100+'px', 50+'px') Math.max(100+'px', 50+'px'),

Я также пробовал использовать некоторые причудливые [] и {} здесь и там, но я не справился с ними правильно. Цените вашу помощь.

Answer 1

Вы можете использовать синтаксис интерполяции строк

const obj = {
    gridTemplateColumns: `${Math.max(100, 50)}px ${Math.max(100, 50)}px ${Math.max(100, 
    50)}px` 
}

Answer 2

вы так близко!

go с

gridTemplateColumns: Math.max(100, 50) + 'px ' + Math.max(100, 50) + 'px ' + Math.max(100, 50) + 'px'

вам, вероятно, будет полезно создать функцию для этого:

function maxPx(a,b) {
 return Math.max(a,b) + 'px'
}

но тогда вам нужно не забыть поставить пробелы между значениями:

gridTemplateColumns: maxPx(100, 50) + ' ' + maxPx(100, 50) + ' ' + maxPx(100, 50)

или

gridTemplateColumns: [maxPx(100, 50), maxPx(100, 50), maxPx(100, 50)].join(' ')