Grid выходит за границы сайта. Что делать?
Вот прописан грид
Дальше идёт сама карточка, смотрите css. Мне кажется это из за прописанного width 320px. Но при его удаление становится плохо карточкам
Дополнительно:
смотрите css
Ну как выложите - посмотрим. За скрины вместо кода можно выхвытить бан.
Давайте расскажу, что вы делаете:
Грид на 2 равных столбца - ок.
Зачем-то у него отрицательные margin.
Ещё зачем-то он флекс на другой ширине. Почему бы ему не быть гридом всегда и без отриц отступов?
Дальше карточке задана ширина 320.
Но проверяете на ширине 469.
Было бы странно, если бы оно влезло.
Что происходит дальше?
Дальше вы решаете, что 320 тут лишние и убираете их.
Что остается?
Остается width: 50%.
Получаем карточку на половину ячейки грида.
Что делать?
Я бы избавилась от:
- флексов (не нужно будет задавать ширину карточкам)
- отрицательных margin
- ширины карточек (пусть грид определяет ширину карточки)
Также можно попробовать добавить в грид minmax и уменьшить количество media.
Если что, всё это написано в инструментах разработчика, хорошо видно какие свойства в итоге применились.
- melodze ау?
- Ankhena, Всё, отлично :)
Вопрос остался, как можно выровнить карточки по высоте ?
- melodze, Вы меня извините, но в вопросе вообще нет слова высота.
Карточки грида в принципе одной высоты, по умолчанию. Обведите li рамочками и убедитесь.
Дальше встает вопрос, зачем все остальные обертки внутри. Их либо удалить либо растягиваться на высоту li.Ответы, которые могут помочь решить задачу тут принято отмечать решениями.
Это помогает и другим спрашивающим с аналогичными проблемами и другим отвечающим не тратить время на чтение вопроса. - Ankhena, Без проблем. Вы мне действительно помогли, спасибо
- melodze, осталось починить высоту :)
Гриды хорошие и девтулз тоже :)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы решить проблему с тем, что Grid выходит за границы сайта, можно использовать несколько подходов в зависимости от конкретной ситуации. Вот несколько возможных решений:
1. Убедитесь, что у вас правильно настроены стили для Grid контейнера и элементов. Проверьте, что у контейнера установлено свойство `display: grid;` и правильные значения для `grid-template-columns` и `grid-template-rows`.
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; }
2. Используйте свойство `overflow: auto;` для контейнера Grid, чтобы обеспечить прокрутку содержимого в случае, если оно выходит за пределы контейнера.
.container { display: grid; overflow: auto; }
3. Попробуйте использовать свойство `grid-auto-flow: dense;`, которое позволяет заполнять пустые ячейки в Grid контейнере более эффективно.
.container { display: grid; grid-auto-flow: dense; }
4. Проверьте, нет ли других стилей или скриптов на странице, которые могут влиять на расположение элементов в Grid. Иногда конфликтующие стили или скрипты могут привести к непредсказуемому поведению Grid.
Если ни одно из вышеперечисленных решений не помогло решить проблему, пожалуйста, предоставьте больше информации о вашем коде и конкретной проблеме, чтобы мы могли более точно определить причину и предложить более точное решение.