Как изменить количество колонок через Props в CSS-in-JS

В CSS-in-JS можно динамически изменять количество колонок через пропсы, используя шаблонные строки или функции. Например, в Styled Components: ```jsx const Grid = styled.div` display: grid; grid-template-columns: repeat(${props => props.columns || 3}, 1fr); gap: 16px; `; // Использование {/* Дочерние элементы */} ``` В Emotion аналогично: ```jsx const gridStyles = (columns) => css` display: grid; grid-template-columns: repeat(${columns}, 1fr); `; // В компоненте ``` Ключевые моменты: 1. Используйте интерполяцию `${}` для динамических значений 2. Задавайте значение по умолчанию (|| 3 в примере) 3. Можно передавать пропс напрямую или через функцию