Tengo una lista de items (7) que se organizan uno debajo de otro en la pantalla. Necesito que a partir del 8 en adelante los items se me reorganicen en 2 columnas y no en 1. Pero no sé muy bien cómo hacerlo o si existen condicionales en CSS con los que pueda decir que a partir del 8 se vaya distribuyendo en 2 columnas con otros tamaños. Es decir cuando entre el item 8 tener 2 columnas de 4 items cada una. Si entra el item 9 pues 2 columnas con 4 items cada una y el sobrante en 1 columna y así sucesivamente. ¿Cómo podría hacer esto? Pensé en Grid pero no sé cómo especificar que ese diseño sea a partir de que haya 8 items en adelante.
Html:
<div>
<ul class="list">
<li>
<button class="btn" >item1</button>
</li>
<li>
<button class="btn" >item2</button>
</li>
<li>
<button class="btn" >item3</button>
</li>
<li>
<button class="btn" >item4</button>
</li>
<li>
<button class="btn" >item5</button>
</li>
<li>
<button class="btn" >item6</button>
</li>
<li>
<button class="btn" >item7</button>
</li>
Css:
.list {
flex-wrap: wrap;
justify-content: center;
justify-content: space-evenly;
flex-direction: row;
display: flex;
margin: 40px 0;
width: 100%;
max-width: 1100px;
text-align: center;
> li {
flex: 0 0 100%;
max-width: 600px;
}