I am looking to showcase a list of items on a desktop web page in a dynamic grid format.
<div class="departments">
@foreach (var department in Model)
{
<div>
<img src="department_photo.png" />
<div class="details">
@Html.DisplayFor(modelItem => department.Description)
</div>
</div>
}
</div>
My goal is to have the items displayed in three auto-wrapping columns, creating a visually appealing layout. For example, if there are four items in the list:
A B C
D
And with 11 items:
A B C
D E F
G H I
J K
To achieve this using Bootstrap 4 for responsiveness, my challenge lies in finding a way to avoid manually separating rows. In regular CSS, this could be done as shown below:
.departments {
display: inline-grid;
grid-template-columns: auto auto auto;
}