Как реализовать равномерное расстояние в сетке грид?
Ссылка скопирована
Сейчас ситуация такая: подскажите, как сделать так, чтобы блоки в грид сетке были на расстояние которое я задал в значении параметра gap. Просто сейчас оно как-то не равномерно стоит
.list { width: 1760px; height: 774px; display: grid; border: 1px solid red; gap: 22px; list-style: none; } .item { &:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4) { width: 572px; height: 376px; background: linear-gradient(135deg, #f0f0f0, #d9d9d9); } &:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8) { width: 275px; height: 287px; background: linear-gradient(135deg, #f0f0f0, #d9d9d9); } &:nth-child(9) { width: 572px; height: 156px; background: linear-gradient(135deg, #f0f0f0, #d9d9d9); } &:nth-child(1) { grid-area: 1 / 1 / 5 / 3; } &:nth-child(2) { grid-area: 1 / 3 / 5 / 5; } &:nth-child(3) { grid-area: 5 / 1 / 9 / 3; } &:nth-child(4) { grid-area: 5 / 3 / 9 / 5; } &:nth-child(5) { grid-area: 1 / 5 / 4 / 6; } &:nth-child(6) { grid-area: 1 / 6 / 4 / 7; } &:nth-child(7) { grid-area: 4 / 5 / 7 / 6; } &:nth-child(8) { grid-area: 4 / 6 / 7 / 7; } &:nth-child(9) { grid-area: 7 / 5 / 9 / 7; } } <ul class="list"> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul>
Нужно решить такую задачу?
Заказать помощь
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Лучший ответ
1
Ольга Сеть
Ответ
Другие ответы (0)
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопроскомментарий
Вам также может быть интересно
VPN
Как правильно настроить vless для Android TV?
1 ответ
Pyrogram
Как правильно зарегистрировать юзер бота в Telegram?
1 ответ
печатные-платы
Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro?
1 ответ
Аккумуляторные батареи
Почему при зарядке автостарта слышен писк, где искать причину?
1 ответ
Gap в CSS Grid работает равномерно только между grid-треками. В вашем коде проблема в том, что вы задаете фиксированные width/height самим item-ам, но не задаете нормальную структуру колонок/строк у grid-контейнера. В итоге элементы раскладываются auto-placement-ом, а свободное место контейнера распределяется не так, как вы ожидаете.
Нужно перестать управлять сеткой через nth-child width и описать сетку явно: grid-template-columns, grid-auto-rows и при необходимости grid-column/grid-row для крупных карточек. Тогда gap будет именно тем расстоянием, которое вы указали.
.list { width: 100%; max-width: 1760px; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 130px; gap: 22px; list-style: none; padding: 0; margin: 0; } .item { min-width: 0; background: linear-gradient(135deg, #f0f0f0, #d9d9d9); } .item:nth-child(1), .item:nth-child(2), .item:nth-child(3), .item:nth-child(4) { grid-column: span 2; grid-row: span 3; } .item:nth-child(5), .item:nth-child(6), .item:nth-child(7), .item:nth-child(8) { grid-column: span 1; grid-row: span 2; } .item:nth-child(9) { grid-column: span 2; grid-row: span 1; }
Если вам нужны строго пиксельные размеры 572 и 275, то контейнер должен быть рассчитан математически: сумма колонок + gap должна совпадать с width. Но для адаптивной верстки лучше использовать fr и span. Так сетка не ломается на другой ширине.
Еще проверьте, что у ul нет стандартных padding/margin, а у item нет дополнительных margin. Gap не отменяет внешние отступы самих элементов. Если элементы “неровно стоят”, часто виноваты margin у li или разная высота контента внутри карточек.
Вывод: gap работает корректно, но он не выравнивает хаотичные fixed-size блоки. Опишите треки сетки и размеры через grid-column/grid-row, а width/height у отдельных item уберите или замените на min-height/aspect-ratio.