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

Question

[lolrofl01]

Есть плитки с картинками шириной 300пх каждая. Чтобы был отступ между плитками я добавил каждой плитке:
margin-left: 10px
Но нужно этот отступ убрать каждому первому элементу на строчке. Если бы я заранее знал количество элементов, я бы сделал это благодаря nth-child. Однако плитки делятся автоматически благодаря правилу flex-wrap: wrap. То есть, чем шире экран, тем больше плиток поместятся на одной строке, тем меньше будет строк. Чем уже экран - тем больше будет строк, соответственно и будет больше элементов, которым надо убрать левый отступ. Как быть в таком случае?

Comments

[Noder SS]

:first-line{

}
?

[lolrofl01]

Noder SS, только для текста.

[Ankhena]

Может, всё таки gap вместо margin?

Либо дурацкий старый хак с отступами всем элементам и отрицательным отступом контейнеру.

[lolrofl01]

Ankhena, прямо в точку! Спасибо. Я совсем забыл про gap, он то мне и помог! Опубликуйте в качестве ответа, я его выберу

Answer 1

[Антон Антон]

Если это лежит во флекс или грид контейнере, то вместо margin-left: 10px; использовать gap: 10px;

Answer 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;
}

Comments

[Дмитрий]

В условии написано про строки, но вы не поняли до конца - не просто див «строка», а визуальная строка, т.к. экран может сужаться

Answer 3

[Дмитрий]

Никак. Можно сделать как в бутстрапе - контейнер с оверфлоу, внутри блок строки с отрицательными margin, а у каждого блока в строке равные margin слева и справа.