Struggling to figure out how to display three items in each row with even spacing using react js and bootstrap.
I've been grappling with this for hours today, trying to implement grid layouts on the page. I managed to render 3-4 items on each row, but the lack of spacing makes it look messy. What I really want is to render 3 items in each row with some spacing between them.
import React from "react";
const Recipes = (props) => (
<div class="container">
<div class="row">
{ props.recipes.map((recipe)=> {
return (
<div key={recipe.recipe_id } style={{display:"flex", flexDirection:"column", justifyContent:"space-between"}}>
<img src={recipe.image_url} alt={recipe.title} style={{width:"200px", height:"200px"}}/>
<h3>{ recipe.title }</h3>
<h5>{`By: ${ recipe.publisher}`}</h5>
</div>
)
})}
</div>
</div>
)
export default Recipes;
I managed to render varying amounts of items on each row, but the lack of spacing creates a messy look. What I really want is to display 3 items in each row with some space between them.