html - How can I have a centered single border between columns? -

i'm trying effect of have single line between columns using grid (foundation). please see pen clarity.

i'm trying create

but spacing between columns doesn't allow me using border-right example. i'd rather not remove spacing responsive reasons.

i end using border.

what best way achieve this?

you can achieve first removing padding in .columns divs. allow divs right next each other. then, apply border top, , right sides of .columns. finally, add :last-child selector , remove right border it.

result

scss

.columns {   padding: 0px;   border-top: 1px solid gray;   border-right: 1px solid gray;   .wrap {     padding: 5px;     p {       font-size: 12px;     }   }   &:last-child {     border-right: 0px;   } } 

jsfiddle