Как расположить блоки разной ширины с помощью grid?

Question

[malayamarisha]

Всем привет.
Подскажите, пожалуйста, как с помощью grid можно расположить элементы так, чтобы элементы с классом .social-icons__item--telegram расположились на одной строке, а все остальные на второй строке выровненные по центру относительно первой строки.

Необходимо сделать так
Пока удалось сделать так:

Comments

[Ankhena]

Можно вопрос: зачем это делать гридом? Он же один из вариантов ответа.

[malayamarisha]

Ankhena,

Можно вопрос: зачем это делать гридом? Он же один из вариантов ответа.

- спасибо, что откликнулись) Хотелось попробовать реализовать с помощью grid )

Подскажите, возможно сделать через grid?
C помощью flex удалось сделать )

[Ankhena]

malayamarisha, если жестко раздаете ячейки для первых двух, то нужно разбить сетку ещё пополам. Если было 6, то будет 12 колонок.
А дальше дичь основанная на количестве элементов. Вот статейка https://css-live.ru/articles/resheno-s-pomoshhyu-c...
Древний и заметно более простой пример https://jsfiddle.net/Ankhena/q3s9jdmb/

Если количество элементов известно, то всё проще.

Если мы не знаем ширину верхних и не можем задать им положение по столбцам, то без доп.обертки, мне кажется, не выйдет.

[malayamarisha]

Ankhena, спасибо большое за развернутый ответ Буду пробовать.
Количество элементов заранее неизвестно, к сожалению.

[Ankhena]

malayamarisha, есть попутный вопрос: почему дизайнер первые два элемента нарисовал с текстом и одним расположением, а остальные по-другому? Может быть, они и по логике разные, а не только дизайнерская затея? Тогда и доп. обертка будет более чем логична.

[malayamarisha]

Ankhena,

есть попутный вопрос: почему дизайнер первые два элемента нарисовал с текстом и одним расположением, а остальные по-другому?

- это блок с иконками соц сетей, первые 2 элемента это одна и та же соц сеть, только название сообщества разное

[Ankhena]

malayamarisha, ну не повезло :)