Как перенести карточку товара на новую строку и масштабировать все карточки для заполнения освободившегося пространства?

Question

[ViT93]

Всем привет!
Как заполнить, оставшееся пространство справа, после переноса карточки, при этом чтобы все карточки были одинакового размера? Интересует решение исключительно флексбоксом, так как вьюпортами пользоваться умею)


Такой способ не подходит, так как 2 последние карточки явно большего размера

.cards {
  display: flex;
  flex-wrap: wrap;
}
.cards__item {
    margin: 10px;
    flex: 1 1;
    min-width: 250px;
}

Comments

[Lord_Dantes]

Вы говорите что вам нужно заполнить размер карточки, но потом указываете что карточка при заполнении слишком большая. Так поставьте max-width если не устраивает ширина.

Или сделайте justify-content: center

[Виталий Першин]

Lord_Dantes, Мой шар говорит, что он имеет ввиду все ряды, а не только последний

[ViT93]

Lord_Dantes, хотел бы я узнать, какую величину указать в max-width.
Если изначально max-width = 25% то в строке помещается 4 карточки, уменьшаем экран до того момента как последняя 4-ая карточка перенесется на новую строку и теперь мы имеем в первой строке 3 карточки с max-width: 25%. 25% * 3 = 75% а нам требуется 100%.

Answer 1

[ReActor Дмитрий Вершанский]

Приветствую.
Могу подсказать реализацию в рамках Grid.

Функция auto-fill, свойства grid-template-columns

Comments

[ViT93]

Да вот я тоже использовал данное решение, пока черт не дернул поинтересоваться на данном ресурсе, стоит ли использовать гриды)

[ReActor Дмитрий Вершанский]

ViT93, что не так с гридами?)

[ViT93]

Re{Actor} Дмитрий Вершанский, то что IE их не поддерживает, на это можно закрыть глаза и запретить просмотр сайта из данного браузера. Но к сожалению есть мобильные браузеры, которые тоже не поддерживают:(

[ReActor Дмитрий Вершанский]

ViT93,

[ReActor Дмитрий Вершанский]

ViT93, вы о "загнувшейся" морально и технически Opera Mini и Китайском детище Baidu?

[ViT93]

Re{Actor} Дмитрий Вершанский, о них самых, я не совсем понимаю как на данном ресурсе посмотреть востребованность этих браузеров

[ReActor Дмитрий Вершанский]

ViT93, любой ресурс по запросу "популярность / рейтинг браузеров" в поисковой системе за месяц, год и даже с 1997 года.

[ReActor Дмитрий Вершанский]

ViT93, opera mini в принципе не существует как браузер для сёрфинга по современному web. Процент пользователей Baidu стремится к нулю

[ViT93]

Re{Actor} Дмитрий Вершанский, да уж загуглил) лично вы используете гриды?

[ReActor Дмитрий Вершанский]

ViT93, исключительно их с 2018 года. В редких случаях (по принуждению) flex, в рамках bootstrap-библиотеки

[ViT93]

Re{Actor} Дмитрий Вершанский, для браузеров которые не поддерживают, делаете отдельную верстку или просто запрещаете просмотр?

[ReActor Дмитрий Вершанский]

В рамках услуг и продукта, которые я предлагаю на рынке, меня не волнуют пользователи, которые не попадают в список таких браузеров, как:

Chrome
Mozilla
Yandex
Opera
Edge (Chromium)
Atom
Safari

[ReActor Дмитрий Вершанский]

ViT93, я просто не думаю о них вообще. Потому как не считаю эту аудиторию хоть в какой-то степени ликвидной на поприще интернет-торговли и прочей деятельности. Тем более, что цифры говорят сами за себя. Смысл для пару десятков отдельно взятых личностей, плести ерунду, чтобы им было "хорошо"?) Проще им сделать клик по адекватному Браузеру.

[ViT93]

Re{Actor} Дмитрий Вершанский, тоже верно)

[Виталий Першин]

Re{Actor} Дмитрий Вершанский, То есть вы реально считаете, что пользователи на маках, которые не обновляют браузер не ликвидные? Ок..

[ReActor Дмитрий Вершанский]

Виталий, да, именно так. И если прочесть внимательнее, то вы найдёте такую фразу: "В рамках услуг и продукта, которые я предлагаю на рынке..." Раунд!

[ReActor Дмитрий Вершанский]

Виталий, родной яблочный safari нам достаточен.

[Виталий Першин]

Re{Actor} Дмитрий Вершанский,

родной яблочный safari нам достаточен.

Вообще-то речь как раз о safari.
Открою вам секрет, но пользователи таких устройств за частую технически абсолютно не подкованы и могут годам не обновлять браузер, даже если им будет сообщать об этом при каждом входе, но при этом у таких пользователей достаточно денег, чтобы совершать покупки, а вы считаете их не ликвидными. Даже если убрать оперу мини с её одним процентом и ie, то остается примерно 3% таких пользователей, то есть из 100 человек вы лично с сайта прогнали 3-х и неизвестно сколько еще подобных допущений вы себе позволяете. А в 2018 эта разница была в разы больше, то есть с 2018 года ваши заказчики априори не могут получить максимальную отдачу от ваших работ, потому что вы часть сегмента просто посчитали не ликвидной. Ваше детское поведение и самоуверенность говорит о том что вам наплевать на них и скорее всего вы даже об этом не думали, либо у вас небольшие проект где такой недостаток просто невозможно заметить.

Бизнесу важен доход и ему наплевать какую технологию вы любите. Крайне мало таких задач, которые в обход здравому смыслу заставят отсеять 3-х пользователей из 100 тем самым лишив бизнес потенциальной прибыли.

[ReActor Дмитрий Вершанский]

Виталий, человек со взрослым поведением) Я чётко указал перечень, который интересен моей компании, при взаимодействии с покупателями - это раз.

Сафари в списке присутствует, а значит он и его юзеры заботят нас - это два.

Благодарю, что не постеснялась и позволили себе гипотетически поучить меня, моему же бизнесу - это три.

Всего доброго - это четыре.

[Виталий Першин]

Re{Actor} Дмитрий Вершанский, Ваша упертость не дает вам понять простую истину, на caniuse написано не только какие браузеры поддерживают технологи, но и с какого года, и вот эти 3 процента это как раз те браузеры о которых вы говорите Chrome, Mozilla, Yandex, Opera, Edge (Chromium), Atom, Safari, но более старые версии, которыми люди пользуются до сих пор в количестве 3%. Это не мои личные убеждения это статистический факт и мой личный опыт.

Благодарю, что не постеснялась и позволили себе гипотетически поучить меня, моему же бизнесу - это три.

Так вот с этого и надо было начинать, что вы своему бизнесу готовы вставлять палки в колеса

[ReActor Дмитрий Вершанский]

Виталий, с каких пор, давать людям характеристики, на этом ресурсе стало допустимым регламентом? До присоединения с "Хабр" или сразу после?) Вам было сказано - "Всего хорошего", а вы продолжаете демонстрировать свои этические наработки "высочайшего и взрослого" уровня.

[Виталий Першин]

Re{Actor} Дмитрий Вершанский,

Вам было сказано - "Всего хорошего

И что?) Я это пишу не столько вам, сколько тем кто прочитает наш диалог и сделает выводы. Уж извините, но я не могу оставить без ответа такое громкое заявление, что пользователи неликвидны, при этом давать список браузеров "поддерживающих" технологию, но не уточнять, что эти же самые браузеры до определенного момента вообще не имеют поддержки. Отсюда и вывод, либо вы не понимаете что говорите, либо вводите в заблуждение намеренно.

Answer 2

[Юрий]