Как лучше сверстать такое через div

Можно делать отступ слева всем кроме первого или справа кроме последнего с помощью псевдоклассов.

.item:not(:first-child) {margin-left: 5%;}

.item:not(:last-child) {margin-right: 5%;}

Yurecm:
Если задается верстка только одного товара, как лучше сверстать, чтобы справа от последнего товара не было отступа, сейчас у каждого указан margin-right:10px; для задания промежутка между товарами. Как убрать у последнего отступ справа, если конкретно последний править нет возможности, только все сразу.

Надеюсь получилось объяснить, вот картинка



Заранее спасибо, плюсом :)

PS да и по высоте в идеале чтобы они все одинаковые были)) спасибо!

.class_name:last-of-type {margin-right: none;}

.item:last-of-type будет применяться только к последнему элементу. То есть в случае ТС (интернет магазин, где явно больше 3-х товаров) не нужен

Скорее нужен .item:nth-of-type(3n+3) - выберется каждый 3-й элемент

Спасибо за инфу )

Я чуть не верно первый раз написал) там +3 нужно. +1 учитывает и первый элемент.

Или можно просто .item:nth-of-type(3n)

ага, спасибо, то что нужно!

Проще сделать всем элементом margin и слева и справа, а у родительского сделать отрицательный margin слева и справа.

У меня назрел вопрос. А если делать резиновый сайт, и тянуть за уголок браузера, логично предположить что 3 блок станет вторым или если расширяем - четвертым, то выходит уже nth:of-type не отделаешься. Верно?

Как быть в этом случае?? : D

@media ? )

вам выше уже посоветовали - поля с обеих сторон у товара и у родителя отрицательные марджины

media для этого не гуд имхо - надо писать основной код максимально универсальным,

а в media задать особенности отображения для мобильных:

закрыть какие-то блоки от показа, задать размеры шрифтов, viewport, изменить расположение колонок относительно друг друга итп.