Naive approach to Masonry layout in React with CSS Grid

PrimitiveMasonry.tsx

import React from 'react'

interface Props {
  colCount: number
  gap: number
  children: React.ReactNode[]
}

const PrimitiveMasonry: React.FC<Props> = ({
  colCount = 2,
  gap = 40,
  children,
}) => {
  const columns = new Array(colCount).fill([])

  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: `repeat(${colCount}, 1fr)`,
        gap,
      }}
    >
      {columns.map((col, i) => (
        <div>
          {children && children.filter((child, j) => j % colCount === i)}
        </div>
      ))}
    </div>
  )
}

export default PrimitiveMasonry