react js :how to create grid view in REACT

import './App.css';
import React from 'react';

function App() {
  const numberOfCards = 110;

  return (
     <div class="grid">
	    {[...Array(numberOfCards)].map((e, i) => {
                return (
 <Grid  item={i+1} />
    )
            })}
</div>
   );
}
class Grid extends React.Component{
    render() {
        return (
            <div class="item">
                      <img src={'https://picsum.photos/100/100?random='+(this.props.item)}   width="200" height="200" />
<br/>
  item   {this.props.item} </div>
        );
    }
}
export default App;

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 12px;
}

.item {
  min-height: 200px;
  background-color: #eee;
}