How to list Items in rows of 3 in React - node.js

Question

I have a list of items that I want to display in rows of 3 but it's not displaying in 3 rows. it works in the normal HTML but doesn't work in React.
Here is my Event Component
const Event = (props) => (
<div className="wrap">
<div className="tile">
<img src={props.event.eventImage} />
<div className="text">
<h1>{props.event.title}</h1>
<h2 className="animate-text">More lorem ipsum bacon ipsum.</h2>
<p className="animate-text">{props.event.description}</p>
<div className="dots">
<span />
<span />
<span />
</div>
</div>
</div>
</div>
);
export default class EventsList extends Component {
constructor(props) {
super(props);
this.state = { events: [] };
}
componentDidMount() {
axios
.get("http://localhost:9000/events/")
.then((response) => {
this.setState({ events: response.data });
})
.catch(function (error) {
console.log(error);
});
}
eventList() {
return this.state.events.map(function (currentEvent, i) {
return <Event event={currentEvent} key={i} />;
});
}
render() {
return (
<div>
<div className="row">{this.eventList()}</div>
</div>
);
}
}
and my css
.wrap {
margin: 50px auto 0 auto;
width: 100%;
display: flex;
align-items: space-around;
max-width: 1200px;
}
.tile {
width: 380px;
height: 380px;
margin: 10px;
background-color: #99aeff;
display: inline-block;
background-size: cover;
position: relative;
cursor: pointer;
transition: all 0.4s ease-out;
box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.44);
overflow: hidden;
color: white;
font-family: "Roboto";
}
.tile img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
transition: all 0.4s ease-out;
}
.tile .text {
/* z-index:99; */
position: absolute;
padding: 30px;
height: calc(100% - 60px);
}
.tile h1 {
font-weight: 300;
margin: 0;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}
.tile h2 {
font-weight: 100;
margin: 20px 0 0 0;
font-style: italic;
transform: translateX(200px);
}
.tile p {
font-weight: 300;
margin: 20px 0 0 0;
line-height: 25px;
/* opacity:0; */
transform: translateX(-200px);
transition-delay: 0.2s;
}
.animate-text {
opacity: 0;
transition: all 0.6s ease-in-out;
}
.tile:hover {
/* background-color:#99aeff; */
box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.64);
transform: scale(1.05);
}
.tile:hover img {
opacity: 0.2;
}
.tile:hover .animate-text {
transform: translateX(0);
opacity: 1;
}
.dots {
position: absolute;
bottom: 20px;
right: 30px;
margin: 0 auto;
width: 30px;
height: 30px;
color: currentColor;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.dots span {
width: 5px;
height: 5px;
background-color: currentColor;
border-radius: 50%;
display: block;
opacity: 0;
transition: transform 0.4s ease-out, opacity 0.5s ease;
transform: translateY(30px);
}
.tile:hover span {
opacity: 1;
transform: translateY(0px);
}
.dots span:nth-child(1) {
transition-delay: 0.05s;
}
.dots span:nth-child(2) {
transition-delay: 0.1s;
}
.dots span:nth-child(3) {
transition-delay: 0.15s;
}
#media (max-width: 1000px) {
.wrap {
flex-direction: column;
width: 400px;
}
}
This is how it's displaying.
But this is what I want to achieve.
I am new to React and I'm learning by building a project.
Here is codepen link of what I want to achieve.
Codepen Link

Answer 1

I have a feeling it's your css, you have your wrap class stretching the whole row width and within it, there is a tile that's only 380px.
Consider making row a grid with three columns.

Answer 2

Ciao, you can use display: 'in-line' like this:
return <Event event={currentEvent} key={i} style={{display: 'in-line'}}/>;