Откуда берется лишняя колонка на grid?
В css указано 3 колонки.
HTML
<section class="gallery"> <div class="container"> <div class="gallery__inner"> <div class="gallery__item gallery__item-1"> <img src="images/gallery-img-1.png" alt=""> </div> <div class="gallery__item gallery__item-2"> <img src="images/gallery-img-2.png" alt=""> </div> <div class="gallery__item gallery__item-3"> <img src="images/gallery-img-3.png" alt=""> </div> <div class="gallery__item gallery__item-4"> <img src="images/gallery-img-4.png" alt=""> </div> <div class="gallery__item gallery__item-5"> <img src="images/gallery-img-5.png" alt=""> </div> <div class="gallery__item gallery__item-6"> <img src="images/gallery-img-6.png" alt=""> </div> <div class="gallery__item gallery__item-7"> <img src="images/gallery-img-7.png" alt=""> </div> <div class="gallery__item gallery__item-8"> <img src="images/gallery-img-8.png" alt=""> </div> <div class="gallery__item gallery__item-9"> <img src="images/gallery-img-9.png" alt=""> </div> <div class="gallery__item gallery__item-10"> <img src="images/gallery-img-10.png" alt=""> </div> <div class="gallery__item gallery__item-11"> <img src="images/gallery-img-11.png" alt=""> </div> <div class="gallery__item gallery__item-12"> <img src="images/gallery-img-12.png" alt=""> </div> <div class="gallery__item gallery__item-13"> <img src="images/gallery-img-13.png" alt=""> </div> </div> </div> </section> |
<section class="gallery"> <div class="container"> <div class="gallery__inner"> <div class="gallery__item gallery__item-1"> <img src="images/gallery-img-1.png" alt=""> </div> <div class="gallery__item gallery__item-2"> <img src="images/gallery-img-2.png" alt=""> </div> <div class="gallery__item gallery__item-3"> <img src="images/gallery-img-3.png" alt=""> </div> <div class="gallery__item gallery__item-4"> <img src="images/gallery-img-4.png" alt=""> </div> <div class="gallery__item gallery__item-5"> <img src="images/gallery-img-5.png" alt=""> </div> <div class="gallery__item gallery__item-6"> <img src="images/gallery-img-6.png" alt=""> </div> <div class="gallery__item gallery__item-7"> <img src="images/gallery-img-7.png" alt=""> </div> <div class="gallery__item gallery__item-8"> <img src="images/gallery-img-8.png" alt=""> </div> <div class="gallery__item gallery__item-9"> <img src="images/gallery-img-9.png" alt=""> </div> <div class="gallery__item gallery__item-10"> <img src="images/gallery-img-10.png" alt=""> </div> <div class="gallery__item gallery__item-11"> <img src="images/gallery-img-11.png" alt=""> </div> <div class="gallery__item gallery__item-12"> <img src="images/gallery-img-12.png" alt=""> </div> <div class="gallery__item gallery__item-13"> <img src="images/gallery-img-13.png" alt=""> </div> </div> </div> </section>
CSS
.gallery__inner { display: grid; grid-template-columns: 1fr 3fr 1fr ; grid-template-rows: auto; justify-items: end; gap: 15px; } .gallery__item img { /* width: 100%; */ object-fit: cover; } .gallery__item-1{ grid-column-start: 1; } .gallery__item-2{ grid-column-start: 2; grid-row-start: 1; } .gallery__item-3{ grid-column-start: 2; grid-row-start: 1; } .gallery__item-4{ grid-column-start: 2; grid-row-start: 1; } .gallery__item-5{ grid-column-start: 4; } .gallery__item-6{ grid-column-start: 1; } .gallery__item-7{ grid-column-start: 2; grid-row: 2; } .gallery__item-8{ grid-column-start: 2; grid-row: 2; justify-self: end; } .gallery__item-9{ grid-column-start: 4; } .gallery__item-10{ grid-column-start: 1; } .gallery__item-11{ grid-column-start: 2; } .gallery__item-12{ grid-column-start: 2; } .gallery__item-13{ grid-column-start: 4; } |
.gallery__inner { display: grid; grid-template-columns: 1fr 3fr 1fr ; grid-template-rows: auto; justify-items: end; gap: 15px; } .gallery__item img { /* width: 100%; */ object-fit: cover; } .gallery__item-1{ grid-column-start: 1; } .gallery__item-2{ grid-column-start: 2; grid-row-start: 1; } .gallery__item-3{ grid-column-start: 2; grid-row-start: 1; } .gallery__item-4{ grid-column-start: 2; grid-row-start: 1; } .gallery__item-5{ grid-column-start: 4; } .gallery__item-6{ grid-column-start: 1; } .gallery__item-7{ grid-column-start: 2; grid-row: 2; } .gallery__item-8{ grid-column-start: 2; grid-row: 2; justify-self: end; } .gallery__item-9{ grid-column-start: 4; } .gallery__item-10{ grid-column-start: 1; } .gallery__item-11{ grid-column-start: 2; } .gallery__item-12{ grid-column-start: 2; } .gallery__item-13{ grid-column-start: 4; }
Дополнительно:
Откуда берется лишняя колонка на grid?
Кто-то же написал это
.gallery__item-5{ grid-column-start: 4; } |
.gallery__item-5{ grid-column-start: 4; }
и аналогичные правила.
И, может, всё таки nth-child?
Правда, пока, по этому примеру, не видно зачем вы вообще пишете линии в явном виде.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с лишней колонкой на grid может возникать из-за различных причин, таких как неправильное определение ширины или высоты элементов, неправильное использование свойства grid-template-columns/grid-template-rows, наличие лишних элементов или стилей, которые могут влиять на разметку сетки.
Для начала, убедитесь, что вы правильно определили ширину и высоту элементов в вашей сетке. Убедитесь, что сумма ширин всех колонок (или строк) не превышает ширину контейнера сетки. Также убедитесь, что вы правильно определили свойства grid-template-columns/grid-template-rows и что они соответствуют вашим ожиданиям.
Если у вас есть лишние элементы или стили, которые могут влиять на сетку, попробуйте удалить или отключить их, чтобы увидеть, как это повлияет на разметку.
Если проблема все еще остается, попробуйте использовать инструменты разработчика браузера для отладки сетки. Смотрите, какие стили применяются к элементам сетки, и как они могут влиять на распределение элементов.
В случае если вы используете CSS Grid Layout, проверьте сетку на наличие лишних свойств или значений, которые могут вызывать неожиданные результаты. Убедитесь, что вы правильно определили grid-template-areas, grid-template-columns/grid-template-rows, grid-column/grid-row и другие свойства, которые могут влиять на разметку сетки.
Приведу пример использования тега
для отображения кода PHP: <pre lang="php">
Надеюсь, эти советы помогут вам найти и исправить проблему с лишней колонкой на grid. Если у вас остались вопросы или проблемы, не стесняйтесь обращаться за дополнительной помощью.