Javascript 在ReactJs中将对象数组的属性打印为网格

我正试图制作一个网页，其中有一个网格的图像占位符在反应JS。 首先，我制作了一个单独的组件作为占位符（在代码中命名为“CubeTemplate”）。 CubeTemplate.js：-

    import React, { Component } from 'react';

    /*change this css file name according your css*/
    import './Cubetemplate.css';


    class Cubetemplate extends Component {

        render (){
            return(
                <div className="simple">
                        <div className="container">
                            <div className="bigdivgal">
                                 <div className="cubeboxgal">
                                    <div className="boxcontentgal">
                                        <div className="innerimggal"><img src={`../images/${this.props.source}`}" /></div>
                                   </div>
                                </div>
                            </div
                        </div>

                    <div className="spacer2gal"></div>
                </div>
            )}
    };

export default Cubetemplate;

---

CSS中的显示网格非常简单

const rootElement=document.getElementById（“根”）；
ReactDOM.render(
{Array（24）.fill（0）.map（（）=>（））}
,
根元素
);
.displayGrid{
显示：网格；
网格模板列：重复（4，1fr）；
网格间距：1rem；
}
.gridItem{
显示：内联；
高度：100px；
宽度：自动；
}
您尝试过CSS中的网格显示吗？
    import React from 'react';
    import ReactDOM from 'react-dom';
    import Cubetemplate from './components/cubes/Cubetemplate';
    import './Gallery.css';


    const GALLERY = [
      {
        img: "1.jpg", title: "Fifty shades of Threta",
        name: "by Navin 'The Flash' Thamindu",
        date: "02/04/2026"
      },
      {
        img: "2.png", title: "Princess cosplay",
        name: "Suchalya Nasaraani",
        date: "05/06/2024"
      },
      {
        img: "3.jpg", title: "Threta theme live performance",
        name: "Tolmojith Bandara",
        date: "07/02/2024"
      },
  {
    img: "4.jpg", title: "3D printing threata action figures",
    name: "Udukaya Thisanka Niruwath ",
    date: "03/01/2023"
  },
  {
    img: "5.jpg", title: "Lovely Prince",
    name: "Disty Tidin Sinnakunji",
    date: "09/04/2022"
  },

    ];

    const Gallery = () => (

      <div className="gallerycontainer">
        <div className="container gal">
              {GALLERY.map(({img}, {name})  => (
                <Cubetemplate source={img}/>     
                ))}
        </div>
      </div>
    );

    export default Gallery;

.cubeboxgal{
    width: 100%;
    height: 15rem;
    background: rgb(37, 37, 37);
    display: inline-block;}

.bigdivgal{
    width: 150%;
    padding-left: 50px;
}

.innerimggal{
    width: 96%;
    height: 14.5rem;
    background: rgb(255, 255, 255);
    display: inline-block; 
    align-items: center;
    top: 0.25rem;
    left: 0.18rem;
    background-image: url(./images/bg.jpg;   
    margin:2%;
}
.spacer2gal{
    margin: 1rem;
}
.simplediv{
    width:100%;
}

@media(max-width:768px){
    .innerimggal {
        display: none;
    }
    .boxcontentgal{
        top: 3rem;
        left:1%;
    }
}