How to show only 3 div in one row and another 3 div in another row-CodePudding

This is the actual design I need to achieve, having 3 divs in a row and another 3 in next row

Instead I'm having this kind of div, can anyone help me to achieve the above styling ?

MY HTML :

    <div >
        <div  *ngFor="let art of meals">
            <img  [src]="art.strMealThumb" style="max-width:300px;" role="button">
            <div>
                <h1 >{{art.strMeal}}</h1>
            </div>
        </div>
    </div>

STYLE SHEET :

I have tried the below styling to achieve the expected output but I didn't get the actual output

    .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;
    }

CodePudding user response：

So assuming that .food-itemis the div in question that you have 6 of, you can achive this using display: grid; on the parent container of all of those div which would be .category-food

So adding this:

 .category-food {
      display: grid;
      grid-template-columns: auto auto auto;
    }

to your CSS (i've also copied and pasted the .food-item div 6 times since you provided code didn't have 6 divs. This is what you get:

.category-food {
      display: grid;
      grid-template-columns: auto auto auto;
      gap: 50px 50px;
      margin: 20px;
    }
    
    .category-food .food-item {
      align-items: center;
      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;
    }

<div >
        <div  *ngFor="let art of meals">
            <img  [src]="art.strMealThumb" style="max-width:300px;" role="button">
            <div>
                <h1 >{{art.strMeal}}</h1>
            </div>
        </div>
               <div  *ngFor="let art of meals">
            <img  [src]="art.strMealThumb" style="max-width:300px;" role="button">
            <div>
                <h1 >{{art.strMeal}}</h1>
            </div>
        </div>
               <div  *ngFor="let art of meals">
            <img  [src]="art.strMealThumb" style="max-width:300px;" role="button">
            <div>
                <h1 >{{art.strMeal}}</h1>
            </div>
        </div>
               <div  *ngFor="let art of meals">
            <img  [src]="art.strMealThumb" style="max-width:300px;" role="button">
            <div>
                <h1 >{{art.strMeal}}</h1>
            </div>
        </div>
               <div  *ngFor="let art of meals">
            <img  [src]="art.strMealThumb" style="max-width:300px;" role="button">
            <div>
                <h1 >{{art.strMeal}}</h1>
            </div>
        </div>
               <div  *ngFor="let art of meals">
            <img  [src]="art.strMealThumb" style="max-width:300px;" role="button">
            <div>
                <h1 >{{art.strMeal}}</h1>
            </div>
        </div>
    </div>