[css] flex, okreslona liczba elementow w row?

[HERO]

Hej mam taki kod

 

<div style="display: flex; flex-wrap: wrap; gap: 10px;">
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
</div>

 

jak nadaje szerokosc dla diva ktory zawiera obrazek - 32% to uzyskuje taki efekt

 

img img img 

img img img 

 

czy jest w css opcja zeby przy zachowaniu skladni kodu html jak wyzej okreslic ze pierwszym wierszu maja byc trzy obrazki i w drugim wierszu maja byc trzy obrazki?

 

 

 

sory temat do skasowania bo znalazlem rozwiazanie

 flex: 1 0 30%; 

 

[blazejs]

Nie męcz się. Użyj grida. Jeśli masz coś w rodzaju tabeli to grid idealnie się do tego nadaje.

 

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;

 

Jeśli chcesz mieć różną ilość kolumn w zależności od rozdzielczości to ustawisz sobie w media-query.