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

Question

[massef]

Использую сетку bootstrap, думал обернуть row в див с классом типо grid-border и через псевдоэлементы и nth-child сделать эти линии для col-.
Какие еще есть варианты?

Comments

[Ankhena]

border-image проще

[massef]

Ankhena W нужна поддержка минимум IE9 а border-image от 11

[Ankhena]

massef: ну тогда просто множественным фоном из двух градиентиков

Answer 1

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

Когда-то уже спрашивали dabblet.com/gist/e4c3d925f3bec7bd0b97

Comments

[massef]

Интересное решение, спасибо!

Answer 2

[WQP]

after - нижнее подчёркивание
before - левое подчёркивание

У nth-child(3n) сделать after none

Ну и с помощью media убирать их.

-----

Другой способ сделать не через сетку, а через flexbox

Answer 3

[Антон Федорян]

https://jsfiddle.net/slippyk/q96x2r6c/

Answer 4

[HelpSophie]

Задать блокам 2 фона с помощью linear-gradient

Comments

[massef]

Что то меня смущает такой вариант, сетка ведь адаптивная, все сжимается, перестраивается

[HelpSophie]

massef:
Вам что фон убирать у нужных nth-child, что before|after не показывать. Какая разница?
Градиент тем и хорош, что размеры можно задавать в %.

Кода меньше.
Ну и еще, наверное, потому что я не очень люблю огород из псевдоэлементов, если можно их не делать.