Умное количество элементов в сетке GRID?

Question

[mumus]

Здравствуйте, подскажите, пожалуйста, никак не соображу.
Вот есть родительский резиновый элемент с display:grid;

Возможно ли и что нужно написать, чтобы сетка вела себя следующим образом:
1. Если внутри лежит 1 элемент, то он на всю ширину
2. Если внутри лежит 2 элемента то они пополам
3. Если внутри лежат 3 и более элементов, то они по 33.3333% процента, чтобы в ряду было по 3 элемента и затем с новой строки.

Спасибо.

Answer 1

[Aleksey Solovyev]

Так?

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3 - 10px), 1fr));
  gap: 10px; 
}

Comments

[mumus]

Да, супер! Спасибо большое!