Как правильнее сверстать таблицу с товарами?

Question

[xsash]

Нужно получить такую сетку



Если элементов больше, чем внешний блок, новые блоки переносятся на следующую строчку.

Сделал DIV с float:left, но меня вводят в ступор рамки. Ибо если использовать border или outline появляются на границе "двойные линии"
jsfiddle.net/nvLzgLsh

Пока для div-ячеек реализовал так:

float:left;
border:1px solid #ccc;
margin:-1px -1px 0 0;

Получилось
jsfiddle.net/ockvgwax

Но меня терзают смутные сомнения, прав ли я

Answer 1

[Андрей Голуменов]

А в чем сомнения? Я бы тоже сделал с отрицательными margin-ами. Другого решения я не вижу

Comments

[xsash]

Да фиг его знает, если честно. Может есть просто более изящное решение

[Андрей Голуменов]

Ну, Размер блоков у вас фиксированный? ширина, высота постоянная? Можно вместо float: left попробовать display: inline-block; vertical-align: top; и указать border-width: 0 1px 1px 0; А для контейнера блоков border: 1px 0 0 1px;

[xsash]

О, тоже интересный вариант. Но тут появляется проблема "пустого пространства" между блоками
jsfiddle.net/meudu09h

[Андрей Голуменов]

jsfiddle.net/w4xegva9/2
Вот так без отступов

[xsash]

Спасибо тебе, добрый человек, за мысли твои умные

Answer 2

[Юрий Лобанов]

codepen.io/iiil/pen/sFcna

Comments

[xsash]

Ха, я так пытался, но толи ночь была поздняя, то ли... В общем "да", только еще дополнительную обертку сделать в нарисовать верхнюю границу