Grid выходит за границы сайта. Что делать?

Question

[melodze]

Вот прописан грид


Дальше идёт сама карточка, смотрите css. Мне кажется это из за прописанного width 320px. Но при его удаление становится плохо карточкам

Comments

[Михаил Р.]

смотрите css

Ну как выложите - посмотрим. За скрины вместо кода можно выхвытить бан.

[imko]

Чинить

Answer 1

[Ankhena]

Давайте расскажу, что вы делаете:
Грид на 2 равных столбца - ок.
Зачем-то у него отрицательные margin.
Ещё зачем-то он флекс на другой ширине. Почему бы ему не быть гридом всегда и без отриц отступов?
Дальше карточке задана ширина 320.
Но проверяете на ширине 469.
Было бы странно, если бы оно влезло.
Что происходит дальше?
Дальше вы решаете, что 320 тут лишние и убираете их.
Что остается?
Остается width: 50%.

Получаем карточку на половину ячейки грида.

Что делать?
Я бы избавилась от:
- флексов (не нужно будет задавать ширину карточкам)
- отрицательных margin
- ширины карточек (пусть грид определяет ширину карточки)

Также можно попробовать добавить в грид minmax и уменьшить количество media.

Если что, всё это написано в инструментах разработчика, хорошо видно какие свойства в итоге применились.

Comments

[Ankhena]

melodze ау?

[melodze]

Ankhena, Всё, отлично :)
Вопрос остался, как можно выровнить карточки по высоте ?

[Ankhena]

melodze, Вы меня извините, но в вопросе вообще нет слова высота.

Карточки грида в принципе одной высоты, по умолчанию. Обведите li рамочками и убедитесь.
Дальше встает вопрос, зачем все остальные обертки внутри. Их либо удалить либо растягиваться на высоту li.

Ответы, которые могут помочь решить задачу тут принято отмечать решениями.
Это помогает и другим спрашивающим с аналогичными проблемами и другим отвечающим не тратить время на чтение вопроса.

[melodze]

Ankhena, Без проблем. Вы мне действительно помогли, спасибо

[Ankhena]

melodze, осталось починить высоту :)
Гриды хорошие и девтулз тоже :)