如何在一行中仅显示 3 个 div，在另一行中显示另一个 3 个 div

Question

这是我需要实现的实际设计，连续有 3 个div，下一行有另外 3 个div

相反，我有这种div，谁能帮我实现上述样式？

我的网页 ：

<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>

样式表：

我尝试了以下样式来实现预期的输出，但没有获得实际输出

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

Answer 1

因此，假设.food-item是您所讨论的div，您有 6 个，您可以使用所有这些div的父容器上的display: grid;来实现这一点.category-food

所以添加这个：

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

到您的 CSS(由于您提供的代码没有 6 个div，我还复制并粘贴了 6 次.food-itemdiv。这是你得到的：

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