Почему появляется горизонтальный скролл при использовании grid?
Имеется два изображения, расположенных рядом друг с другом в сетке. У обоих ширина 960px. На моем экране, у которого ширина 1920px, все выглядит хорошо (960px + 960px = 1920px):
Но, когда я переключась в режиме устройства в девтулсе и устанавливаю ширину вьюпорта 1920px или больше, изображения не помещяются в область просмотра и появляется горизонтальный скролл:
Такая же история происходит с флексбоксом.
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="grid"> <img class="green" src="./images/green.png" class="green"> <img class="purple" src="./images/purple.png" class="purple"> </div> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="grid"> <img class="green" src="./images/green.png" class="green"> <img class="purple" src="./images/purple.png" class="purple"> </div> </body> </html>
CSS:
* { margin: 0; padding: 0; } .grid { display: grid; grid-template-columns: repeat(2, 960px); } .green { grid-column: 1/2; } .purple { grid-column: 2/3; } |
* { margin: 0; padding: 0; } .grid { display: grid; grid-template-columns: repeat(2, 960px); } .green { grid-column: 1/2; } .purple { grid-column: 2/3; }
Я уже нашел способ решить данную проблему, назначив одному из изображений max-width: 100%, либо указав сетке overflow-x: hidden. Меня интересует, почему сетка и флексбокс себя так ведут.
Дополнительно:
Потому что ты используешь абсолютные величины в пикселях. От такого подхода не стоит ожидать отзывчивости. Поменяй объявление колонок на что-то вроде 50vh,50vh или 1fr,1fr.
Можно попробовать закрыть адаптивный режим, обновить страницу, и открыть обратно.
Всё таки девтулзы частенько подглючивают, особенно при изменении размера/масштаба.
Дополню:
1. Задавать max-width 100% для адаптивных картинок - хорошая практика
2. Оборачивать адаптивные картинки в div (или в ссылку или в figure и т.д.) и использовать object-fit тоже хорошая практика.
Сама ячейка грида может выступать такой оберткой, в которую встраивают картинку, но это не всегда удобно.
3. Сетку лучше делать не в px, а в относительных единицах измерения.
это вопрос скорее не про флексы и гриды, а про картинки, которые если не указано обратного занимают свой изначальный размер в пикселях, поэтому обычным делом является что-то типа img { display: block; max-width: 100%; } в "ресете"
- Но у них обоих исходная ширина как раз 960px.
- zytonox, а в девтулах в респонсив-моде происходит масштабирование, у меня оно частенько глючит и я запрещаю это самое масштабирование
- IvanU7n, то есть получается, что это можно считать багом?
- zytonox, можно и так считать, но исключительно в devtool и в некоторых не очень распространённых случаях
- IvanU7n, благодарю за ответ!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Появление горизонтального скролла при использовании grid может быть вызвано несколькими причинами. Вот некоторые из них и способы их решения:
1. Слишком большие значения для grid-template-columns: Если сумма значений в grid-template-columns больше ширины контейнера, то появится горизонтальный скролл. Убедитесь, что ширина контейнера достаточна для размещения всех столбцов.
```php
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* сумма значений равна 3, возможно это слишком много */ }
```
2. Неправильное использование grid-gap: Если grid-gap добавляет дополнительное пространство между элементами и это пространство не учитывается при расчете ширины контейнера, то появится горизонтальный скролл. Убедитесь, что ширина контейнера учитывает grid-gap.
```php
.container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; /* добавляет дополнительное пространство между элементами */ }
```
3. Неуказанный grid-auto-flow: Если не указано, как элементы должны размещаться в сетке (например, по умолчанию grid-auto-flow: row), то элементы могут выходить за пределы контейнера и вызывать горизонтальный скролл. Укажите grid-auto-flow: column, если вы хотите, чтобы элементы размещались в столбец.
```php
.container { display: grid; grid-auto-flow: row; /* элементы размещаются в строку, что может вызвать горизонтальный скролл */ }
```
4. Неправильное использование свойства overflow: Если у контейнера применено свойство overflow-x: auto или overflow: auto, то это может вызвать появление горизонтального скролла. Убедитесь, что свойство overflow задано правильно.
```php
.container { display: grid; overflow-x: auto; /* может вызвать появление горизонтального скролла */ }
```
Проверьте вышеперечисленные причины и внесите необходимые изменения в код, чтобы избежать появления горизонтального скролла при использовании grid.