Я пытаюсь создать веб-страницу с сеткой заполнителей изображений в ReactJs. Сначала я сделал отдельный компонент в качестве заполнителя (в коде он называется «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;
Затем я добавил массив объектов в основной компонент (названный Gallery. js), чтобы отправить его на CubeTemplate с помощью функции карты. Галерея. js: -
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;
Теперь у меня проблема в том, что я хочу отобразить эти поля-заполнители как a grid with 4 columns. Но все, что я пробовал, потерпело неудачу. Что я должен сделать, чтобы получить этот эффект?
К вашему сведению, это CubeTemplate. css:
.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%;
}
}