Как передать динамическое количество колонок в layout-компонент через props, сохранив при этом один CSS-класс?

Передача динамического количества колонок через props.children

В React для создания layout-компонента, который может принимать произвольное количество колонок, используется специальный пропс children. Этот пропс автоматически содержит все дочерние элементы, переданные между открывающим и закрывающим тегами компонента. Такой подход позволяет сохранить единый CSS-класс для контейнера, а стилизацию колонок реализовать через CSS Grid или Flexbox.

Пример реализации

Рассмотрим компонент ColumnsLayout, который принимает children и отображает их в виде колонок:

// ColumnsLayout.jsx
import './ColumnsLayout.css';

function ColumnsLayout({ children }) {
  return (
    <div className="columns-layout">
      {children}
    </div>
  );
}

export default ColumnsLayout;

CSS для этого компонента использует Grid:

/* ColumnsLayout.css */
.columns-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

Теперь можно передать любое количество колонок:

// App.jsx
import ColumnsLayout from './ColumnsLayout';

function App() {
  return (
    <ColumnsLayout>
      <div>Колонка 1</div>
      <div>Колонка 2</div>
      <div>Колонка 3</div>
    </ColumnsLayout>
  );
}

Как это работает

Пропс children может быть одиночным элементом, массивом элементов или даже функцией (render prop). В данном случае он представляет собой массив из трех <div>. CSS Grid автоматически распределяет их по колонкам благодаря свойству grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). Это означает, что колонки будут занимать минимум 200px, а если места больше — равномерно расширяться.

Вывод

Использование props.children — это стандартный и гибкий способ создания layout-компонентов в React. Он позволяет передавать динамическое количество колонок без изменения самого компонента, сохраняя единый CSS-класс для контейнера. Этот подход особенно полезен при создании карточек товаров, списков элементов или любых других повторяющихся структур, где количество элементов заранее неизвестно.