Как растянуть элемент до доступной ширины? ⇐ CSS

[Anonymous]

В одной строке может быть максимум три столбца, и тогда при добавлении нового элемента списка происходит переход на новую строку и элемент должен занимать всю доступную ширину строки, а если их две новые элементы, то они делят ширину между собой. Например, установка flex: 1 0 315px для элементов. Наш контент будет динамически добавляться и удаляться. Можно ли добиться такого поведения без гибкого отображения?

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

* {
box-sizing: border-box;
}

.content {
display: grid;
width: 1024px;
grid-template-columns: 315px 1fr;
gap: 20px;
}

.content__list {
grid-row: 2;
grid-column: 1 / -1;
display: grid;
gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(315px, 1fr));
}

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

TITLE
[list]
[*]

Lorem


Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus
voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.

[*]

Lorem


Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus
voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.

[*]

Lorem


Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus
voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.

[*]

Lorem


Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus
voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.

[/list]

Подробнее здесь: https://stackoverflow.com/questions/791 ... able-width