Para realizar o desafio apenas usei as propriedades flex. O código acrescentado no Css nas duas últimas linhas.
.quadros__container {
width: 1150px;
height: 600px;
position: absolute;
left: 176px;
top: 120px;
background: #525c63d8;
padding: 10px;
border-radius: 10px;
display: flex;
flex-flow: column wrap;
}
Lembre-se de que a propriedade flex-wrap: wrap; é necessária para permitir que os itens flex se envolvam. No seu caso, você já está usando flex-flow: column wrap;, que é uma forma abreviada de definir flex-direction: column; e flex-wrap: wrap; simultaneamente. Isso significa que os itens flex irão se envolver em colunas quando não houver mais espaço na direção da coluna.
.quadros__item {
width: 100%; /* Ajuste a largura conforme necessário */
height: 300px; /* Defina uma altura para os itens flex */
/* Outras propriedades de estilo conforme necessário */
}
Além disso, é importante você notar que, quando ocorre o envolvimento, o espaçamento cruzado entre os itens é 0. Portanto, você pode usar padding no contêiner ou margem nos itens para ajustar o espaçamento conforme necessário.
Essas informações devem ajudá-lo a ajustar seu CSS para que os itens flex se envolvam corretamente em colunas dentro do seu contêiner flex.