Как реализовать сетку с «неполным бордюром»?

Question

[monochromer]

Возникли проблемы с реализацией такой сетки



Вот мой набросок - jsfiddle.net/6wptj8n5/2
Сетка должна быть рассчитана на произвольное число элементов.
Не знаю, как корректно удалить бордюры у элементов в последней строке.

В своем примере я просто закрасил их псевдоэлементом (раскомментируйте правило для .grid:after).
Но лучше без закраски, так как фон должен просвечивать.

Comments

[Lynn «Кофеман»]

Ширина и количество ячеек в ряду фиксировано?

[monochromer]

SelenIT2: спасибо. Пока сделал margin-bottom: -1px для ячеек.

Алексей Тен: ширина должна быть пропорциональна ширине контейнера. Количество будет меняться в зависимости от размера экрана.

[Lynn «Кофеман»]

monochromer: не понял. Можно в решении применять факт, что в ряду будет ровно 4 ячейки и если вам понадобиться пять, то вы напишите другой CSS (например через media-query)?

[monochromer]

Алексей Тен: да

[Lynn «Кофеман»]

monochromer: dabblet.com/gist/e4c3d925f3bec7bd0b97

Answer 1

[MhMadHamster]

jsfiddle.net/9btrar6s
адаптивно, под любое количество ячеек четное количеству строк

Comments

[Lynn «Кофеман»]

фон страницы не просвечивает

[MhMadHamster]

Алексей Тен: jsfiddle.net/9btrar6s/1

[monochromer]

MhMadHamster: спасибо!

Answer 2

[Ксения Михайлова]

Можно убирать верхнюю границу у первых пяти (верхнего ряда) элементов
codepen.io/anon/pen/xGQOmZ