I'm aiming for a design with 3 divs in one row and another 3 in the next, like this
But what I currently have is different. Can someone assist me in achieving the desired layout?
MY HTML :
<div class="category-food">
<div class="food-item" *ngFor="let art of meals">
<img class="card-img-top center" [src]="art.strMealThumb" style="max-width:300px;" role="button">
<div>
<h1 class="content-text">{{art.strMeal}}</h1>
</div>
</div>
</div>
STYLE SHEET :
I've attempted to use the following styling to achieve the desired look, but it hasn't worked as expected
.category-food {
display: flex;
}
.category-food .food-item {
align-items: center;
margin: 20px;
width: 100%;
border: 1px solid grey;
}
.card-img-top {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 6px;
}
.content-text {
font-size: 24px !important;
text-align: center;
}