@lolrofl01

Как можно убрать отступы каждому первому элементу в строке, если количество элементов зависит от ширины экрана?

Есть плитки с картинками шириной 300пх каждая. Чтобы был отступ между плитками я добавил каждой плитке:
margin-left: 10px
Но нужно этот отступ убрать каждому первому элементу на строчке. Если бы я заранее знал количество элементов, я бы сделал это благодаря nth-child. Однако плитки делятся автоматически благодаря правилу flex-wrap: wrap. То есть, чем шире экран, тем больше плиток поместятся на одной строке, тем меньше будет строк. Чем уже экран - тем больше будет строк, соответственно и будет больше элементов, которым надо убрать левый отступ. Как быть в таком случае?
  • Вопрос задан
  • 144 просмотра
Решения вопроса 1
Fragster
@Fragster
помогло? отметь решением!
Если это лежит во флекс или грид контейнере, то вместо margin-left: 10px; использовать gap: 10px;
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@Sozdavan
Вы можете использовать селектор CSS :first-child для выбора первого элемента в каждой строке и удаления левого поля. Например, вы можете использовать следующий CSS:

.tile {
  margin-left: 10px;
}

.tile:first-child {
  margin-left: 0;
}

Это удалит левое поле для первого элемента в каждой строке, независимо от того, сколько элементов находится в строке или насколько широк экран
or 

.tile:nth-child(n+1) {
  margin-left: 0;
}
Ответ написан
thewind
@thewind
php программист, front / backend developer
Никак. Можно сделать как в бутстрапе - контейнер с оверфлоу, внутри блок строки с отрицательными margin, а у каждого блока в строке равные margin слева и справа.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы