Providing different data to multiple instances of a react component while creating a responsive grid

Question

Goal

To recreate rearrange-able, dragable, responsive, self-packing grid layout using react components

---

My Approach

my implementation I created a wrapper component called 'grid_container' that includes all of the block components.

---

Problem

I want to include content inside of blocks. Initially I thought of passing in props with differing data (photos and videos of my work) to their respective block then I thought of providing html inside of the block components I had thought that I'd be able to do something like,

<Block>
    <div><p>Content inside this block</p></div>
</Block>

import styles from '../styles/Home.module.css'
import React from 'react'
import Grid_container from '../components/Grid_container'

export default function Home() {
  return (
    <div className={styles.container}>
      <Grid_container>
      </Grid_container>
    </div>
  )
}

import styles from '../styles/Grid_container.module.css'
import Block from './Block'

export default function Grid_container() {
    return (
        <div className={styles.container}>
            <Block></Block>
            <Block></Block>
            <Block></Block>
            <Block>
                <div><p>Content inside this block</p></div>
            </Block>
            <Block></Block>
        </div>
    )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

But I guess it is not allowed. I have a similar problem as stated in this stack overflow problem How should I go about it?