I have a code where I want to make the content inside the div, go from left to right (which I did using Flex-direction: row) and when it gets to the limit of the div, goes down and continues this order. The order should look like this (https://i.stack.imgur.com/L97y0.png) with the elements inside going in this order.

I'm using MVC core, and its a system which accepts requests and shows them on the screen.

Here's the HTML of the 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>

the CSS of the 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;
}

Here's how it currently is: