Tengo un código en el que quiero hacer el contenido dentro del div, ir de izquierda a derecha (lo que hice usando Flex-direction: fila) y cuando llega al límite del div, baja y continúa en este orden. El orden debería verse así ( https://i.stack.imgur.com/L97y0.png ) con los elementos dentro en este orden.

Estoy usando el núcleo MVC, y es un sistema que acepta solicitudes y las muestra en la pantalla.

Aquí está el HTML de la div

 <div class="pedido-tudo"> @foreach(var pedido in Model) { <div class="pedido-quadrado"> @pedido.IdPedido @pedido.NomeCliente @pedido.TelCliente @pedido.DataEntrada @pedido.HoraEntrada @pedido.HoraSaida @pedido.TextoStatus @pedido.TextoTipoPedido @if (@pedido.TextoStatus == "Andamento" && @pedido.HoraSaida == "") { <div class="botoes-cad"> <a href="/Pedidos/Update/@pedido.IdPedido" class="btn btn-sm btn-primary" id="finalizar">Finalizar</a> </div> } </div> } </div>

el CSS del div

 .pedido-tudo { margin-left: 1.5rem; width: 60rem; max-width: 60rem; display: flex; flex-direction: row; } .pedido-quadrado{ margin-top: 1rem; margin-left: 5.7rem; width: 18rem; height: 20rem; border: 1px rgb(170, 0, 0) solid; color: black; font-size: 16px; }

Así es como está actualmente: