Как заполнить контейнер элементами на всю ширину?

Question

[weranda]

Приветствую.
Есть простая сетка. Вот она: https://codepen.io/weranda/pen/XWzdvep
Девятый элемент контейнера надо растянуть на всю ширину контейнера. Как это сделать, не прибегая к стилизации самого элемента, девятого по счету в этом случае? Элементов в последней строке может быть другое количество. Во флексах есть flex-grow: 1 и все растягивается.

Comments

[Ankhena]

Если это

не прибегая к стилизации самого элемента

только потому что

Элементов в последней строке может быть другое количество

То есть это:
https://css-live.ru/articles/resheno-s-pomoshhyu-c...

[ambisinister One]

Ankhena, а если флексом растянуть строку, а значение последнего, перенесённого блока, дать 100% ? Если, конечно, можно спросить...

[Ankhena]

ambisinister,
Если ставить вопрос "как это реализовать вообще", то можно и 100% вместе с выкладками из той статьи. Потому что нельзя просто последнему дать 100%, выйдет лажа. Но разумнее flex-grow.

А если контексте вопроса автора, то мне кажется, речь о гридах.

[weranda]

Ankhena, именно о них. Как на гридах сделать?

[Ankhena]

weranda, не вижу ответа на свой первый комментарий.

[weranda]

Ankhena, нет, не это.

[Ankhena]

weranda, что не то? По какой причине нельзя использовать селекторы nth-child и т. д?

[weranda]

Ankhena, Можно, почему же нельзя, разумеется, можно. Меня больше интересует есть ли в самих гридах свойства, которые делают так, как нужно — вот в чем вопрос.

[Ankhena]

weranda, в самих гридах есть свойство grid-column.
И оно применяется к элементам грида.

[weranda]

Ankhena, не понимаю. Может быть, вечер, устал, плохо соображаю.
В блоке может быть вообще любое количество элементов: 1, 3, 6, 7, 15, 59. Блок может содержать в ряд 2, 3, 4, 5, 6 элементов. Неужели нет свойства, которое само бы высчитывало свободное пространство в строке и заполняло бы его. Вот вам пример из трех элементов в строку:

На флексах последние элементы строки «делают» это — распределяют свободное пространство между собой. Есть варианты сделать это все без тонкой подстройки на гридах?

[Ankhena]

weranda, нет.
Иначе гриды были бы флексами.

[weranda]

Ankhena, прям не верится, что разработчики такую штуковину не предусмотрели — упустили?

[Ankhena]

weranda, не думаю, чтобы это планировалось, по крайней мере прямо сейчас. Ведь для такого есть флексы.

[weranda]

Ankhena, Есть флексы, есть гриды, есть флоаты, есть таблицы — намешали всё)

[Ankhena]

weranda, молотки, пилы, скальпель... ну вы поняли

Answer 1

[Андрей Галкин]

Если пойти через флекс контейнер, то желаемый результат можно достичь следующим образом:
код тут