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

В CSS-in-JS количество колонок передают через props, а стиль вычисляется из них — или, лучше, через CSS-переменную.

styled-components / Emotion

const Grid = styled.div`
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(${(p) => p.columns}, 1fr);
`;

<Grid columns={3}>…</Grid>

Минус: при каждом новом значении генерируется новый класс.

Через CSS-переменную

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
`;

<Grid style={{ '--columns': columns }}>…</Grid>

Класс один, меняется только значение переменной — быстрее и работает и с CSS Modules.

Адаптивность

Иногда колонки лучше не передавать вовсе, а дать сетке подстроиться самой:

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Коротко для собеседования

Передать columns в props и использовать в repeat(${columns}, 1fr); эффективнее — через CSS-переменную в style.

Подробнее: styled-components — Adapting based on props