Criando grid com flexbox

A ideia consiste em utilizar as propriedades: display: flex; e flex-wrap: wrap; em conjunto do height para alinhar os elementos a esquerda, e depois de acordo com a height definida, criar os pontos de quebra para alinhar os elementos em uma lista horizontal.

Já adiantando que eu modifiquei os valores de width, height e cores que vieram no código inicial para ficar mais agradável aos olhos, mas , acho que essas alterações não prejudicam o a ideia de construção da grid no final.

.grid {
            background: lightslategray;
            width: 500px;
            height: 120px;
            padding: 5px;

            display: flex; 
            flex-wrap: wrap; 
            text-align: center;
        }

Após essa etapa, basta definir os valores de tamanho das div's, para que essa lista seja preenchida com a quantidade de elementos que desejarmos por linha, e também, definir uma margem, para que cada um dos elementos se distanciem entre si.

      .box {
            background-color: lightseagreen;
            color: white;
            height: 50px;

            width: 18%;
            margin: 1%;
        }