Помогите выровнять контент сайта

у меня все так и есть, остальные карточки идут снизу, а мне нужно чтобы в первой строке три штуки, второй и третьей

после 3 карточек делать такой же но с другими карточками

.container {
display: flex;
flex-wrap: wrap;
}
.card {
flex-basis: 30%;
margin: 10px;
}
Флексануть можно, если гридить не охота)

Можно так
<div class="container">
<div class="card">Карточка 1</div>
<div class="card">Карточка 2</div>
<div class="card">Карточка 3</div>
<br>
<div class="card">Карточка 4</div>
<div class="card">Карточка 5</div>
<div class="card">Карточка 6</div>
<br>
<div class="card">Карточка 7</div>
<div class="card">Карточка 8</div>
<div class="card">Карточка 9</div>
</div>

.card {
display: inline;
}