Как сделать сетку на CSS Grid с одинаковыми колонками?

CSS Grid создаётся через display: grid, а колонки задаются свойством grid-template-columns:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 равные колонки */
  gap: 16px;                              /* промежутки */
}

<div class="grid">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
</div>

Разберём по частям:

• 1fr — это «одна доля» свободного места. repeat(3, 1fr) = три колонки по равной доле, то есть одинаковой ширины.
• gap задаёт расстояние между ячейками сразу по горизонтали и вертикали (не нужны хитрые margin).
• Элементы сами переносятся на новые строки: 4-я карточка уйдёт под 1-ю.

Чтобы сетка была адаптивной без media queries, замените фиксированное число на авто-подбор:

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Теперь колонок будет ровно столько, сколько влезает: по 200px минимум, растягиваясь до равной доли.