Могу ли я иметь разное количество столбцов в строке в сетке CSS? ⇐ CSS

[Anonymous]

Код: Выделить всё

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px;
grid-auto-rows: 60px;
grid-gap: 15px;
}

.col {
background-color: tomato;
}

Код: Выделить всё

При этом создаются 2 строки: первая имеет высоту 100 пикселей, вторая автоматически создается с высотой 60 пикселей. 2 столбца во второй строке имеют ширину 1fr.

Можно ли с помощью CSS Grid/Flexbox горизонтально центрировать 2 столбца во 2-й строке? Т.е. иметь различное количество столбцов в строке.

Я застрял, пытаясь решить тривиальный вариант использования платформы CSS Grid в браузере. Этого довольно легко достичь, если вы создаете сетки с помощью Flexbox.

Но могу ли я добиться этого с помощью CSS Grid?

Вот демо-версия CodePen того, чего я пытаюсь достичь.

Подробнее здесь: https://stackoverflow.com/questions/476 ... a-css-grid