Может ли grid автоматически растянуть по ширине не влезающий элемент (как flex-grow при wrap)?

Question

[Михаил Оловянников]

Всем привет. У меня есть grid блок в котором 3 дочерних блока. Родитель имеет следующий код:

.base-box {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(375px, 1fr));
	grid-auto-rows: auto;
	max-width: 1200px;
	overflow: hidden;
	border-radius: 20px;
}

Что я хочу сделать: при сжимании экрана самый правый блок (темно-зеленый) автоматически перелетает на 2 ряд, но занимает при этом только 1 ячейку. Можно ли сделать так, чтобы без дополнительных media правил он автоматически растягивался на 2 ячейки как если бы это было при flex? P.S. - Я просто хочу хорошо научиться работать и понимать grid и по этому пробую всякое.

Comments

[Ankhena]

Без auto-fill можно и без media. С помощью вот этой чудесной статьи https://css-live.ru/articles/resheno-s-pomoshhyu-c...

Но я не уверена, что дизайнеру понравится решение с растянутой строкой (но это уже не о гридах)

[Михаил Оловянников]

Ankhena, привет.) Я прочитал статью, но не понял как она может помочь в данном случае. Да и мне интересно - можно ли это реализовать по средствам самого grid. Пока я не знаю как это сделать без использования media тегов.(

[Ankhena]

Михаил Оловянников,

но не понял как она может помочь в данном случае

В данном случае, при наличии auto-fill, никак.

[Михаил Оловянников]

Ankhena, просто я когда делал это, то предполагал, что таких карточек может быть неизвестное количество. А без auto-fill как вы бы сделали?

[Ankhena]

Михаил Оловянников, с известным количеством колонок я бы использовала прием как в статье.

[Михаил Оловянников]

Ankhena, то есть через nth? Но все равно не понимаю. Какое отношение nth имеет к изменению размера экрана.? Если количество колонок будет известно (например 3 на 3), то макет будет статичным и последний блок без дополнительных правил вообще переноситься на второй ряд не будет.

[Ankhena]

Михаил Оловянников, если колонок будет точно 3 и элементов тоже 3, то не ясно в чем вообще вопрос.

Если колонок фиксированное количество, а элементов неизвестно сколько и нужно навести порядок в последнем ряду, то поможет nth-, :not и вся та история из статьи.

[Михаил Оловянников]

Ankhena, колонок 3 и элементов 3. Но элементы имеют минимальную ширину — например 300 пикселей. Элементы занимают 900 пикселей. Если я буду сжимать экран до 700 пикселей по ширине например, то мне нужно чтобы последний элемент перепрыгнул на 2 ряд и стал шириной в 600 пикселей. Даже перепрыгивание невозможно сделать без auto-fill не прибегая к media выражениям. Простите, я наверное вам задурил голову.)
Вот пример как это должно работать, только на grid: https://study-projects.netlify.app/3columns/

[Ankhena]

Михаил Оловянников, ещё раз: если число колонок неизвестно, то грид не поможет (без js и media)

[Михаил Оловянников]

Ankhena, спасибо за помощь и терпение.)