I need help displaying my results in three rows side by side in React/JavaScript using flexbox. Since I only have one CardItem, I can't just copy and paste it three times as it would show the same result in each row. Is there a way to achieve this without duplicating the card?
Check out my code below:
return (
<div className="cards">
<div className="cards__container">
<div className="cards__wrapper">
<ul className="cards__items">
<CardItem
src={restaurant.imageURL}
restaurantName={restaurant.name}
openingHours={restaurant.openingHours}
vibes={restaurant.vibes}
cuisine={restaurant.cuisine}
location={restaurant.area}
address={restaurant.address}
phone={restaurant.phone}
/>
</ul>
</div>
</div>
</div>
);
Here's the CSS snippet:
.cards {
padding: 2rem;
background: #fff;
}
h1 {
text-align: center;
}
.cards__container {
display: flex;
flex-flow: row-reverse nowrap;
max-width: 1120px;
width: 90%;
margin: 0 auto;
justify-content: center;
}
.cards__wrapper {
position: relative;
margin: 30px 0 45px;
flex-flow: row-reverse nowrap;
}
.cards__items {
margin-bottom: 24px;
}
.cards__item {
display: flex;
flex-flow: row-reverse nowrap;
border-radius: 10px;
width: 300px;
}
.cards__item__link {
flex-flow: row-reverse wrap;
width: 100%;
box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
-webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017);
border-radius: 10px;
overflow: hidden;
text-decoration: none;
}
.cards__item__pic-wrap {
position: relative;
width: 100%;
padding-top: 67%;
overflow: hidden;
}
.cards__item__pic-location {
position: relative;
width: 100%;
padding-top: 67%;
overflow: hidden;
}
Current layout can be seen here: https://i.sstatic.net/dqOUv.jpg