Move the
<div class="row">
outside of your
foreach
loop:
<div class="col-7 container">
<div class="row navBoxGrid">
@foreach (var item in Model.ResourceType)
{
<div class="col navBox">
<a asp-page="/News"><p class="navBoxSubCaption">@item.ResourceTypeName</p></a>
</div>
}
</div>
</div>
Then use CSS to define the layout:
.navBoxGrid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.navBoxGrid > .navBox {
flex: 1 1 50%;
}