Как расположить элементы в плитку при помощи html css

есть вот такая разметка

@foreach (var item in Model)
{
        <article class="style1">
            <span class="image">
                <img src="images/pic01.jpg" alt="" />
            </span>
            <a href="generic.html">
                <h2>@item.Brand</h2>
                <div class="content">
                    <h3>@item.Type</h3>
                    <h3><strong>@item.Price</strong> </h3>
                </div>
            </a>
        </article>
}

Как сделать чтобы элементы ставились как в таблицу или в плитку, а не просто один под другим, похоже нужно какие-то стили классу tiles прописать, я пробовал flex justifycontent space around, но получается что они просто идут в строку, а мне нужно, чтобы было, например 4 элемента в строку, а другие элементы article идут уже ниже, делал это при помощи таблиц, но это не динамически получается, да и вообще слышал, что таблицы это прошлый век, посоветуйте, кто верстает хорошо, уверен для вас это елементарно, но я вертску почти не знаю.