Как можно растянуть последние блоки по ширине при использовании CSS Grid?

Чтобы растянуть последние 3 элемента в CSS Grid, чтобы они заполнили свободное пространство, вы можете использовать свойство `grid-column` и `grid-row` для указания их положения в сетке.

Ниже приведен пример CSS, который демонстрирует эту концепцию:

```
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Задает три колонки равной ширины */
  grid-auto-rows: minmax(100px, auto); /* Задает автоматическую высоту для строк */
  grid-gap: 10px; /* Задает промежуток между элементами */
}

.item {
  background-color: lightblue;
  padding: 10px;
}

.item:nth-last-child(-n+3) {
  grid-column: span 2; /* Растягивает элемент на две колонки */
}
```

В этом примере `.item:nth-last-child(-n+3)` выбирает последние три элемента в контейнере и задает им свойство `grid-column: span 2`, что растягивает эти элементы на две колонки. Это приведет к заполнению свободного пространства и созданию эффекта, подобного `flex-grow: 1` в Flexbox.

Пример работы можно также найти по ссылке на Codepen: https://codepen.io/anon/pen/PozOzQW

Если количество блоков в флексах неизвестно заранее, то это не получится сделать. Если количество блоков фиксировано, то можно применить следующий подход. Увеличьте количество колонок до общего кратного всех вариантов количеств ячеек в строках. В вашем случае, для двух чисел - 4 и 3, общим кратным будет 12. Затем задайте сетку с 12 колонками и распределите блоки по этим колонкам.