Common border around selected items - grid

by dipish

HTML

<div class="col">
    <div class="item item-selected">item</div>
    <div class="item">item</div>
    <div class="item item-selected">item</div>
    <div class="item">item</div>
    <div class="item item-selected">item</div>
    <div class="item item-selected">item</div>
    <div class="item item-selected">item</div>
    <div class="item">item</div>
    <div class="item item-selected">item</div>
</div>
<div class="col" style="left: 179px;">
    <div class="item">item</div>
    <div class="item item-selected">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item item-selected">item</div>
    <div class="item item-selected">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>    
</div>

CSS

body {
    margin: 30px;
    background: lightgrey;
}

* {box-sizing: border-box;}

.col {
    position: absolute;
}
.item {
    width: 150px;
    height: 50px;
    background: transparent;
    /*border: solid 1px transparent;*/
    position: relative;
    border: solid 1px transparent;
}

.item-selected {
    background: white;
    /*box-shadow: 0 0 0 1px red;*/
    border-color: red;
    /*box-shadow: 0 2px 2px blue;*/
}

.item-selected + .item-selected {
    /*box-shadow: 0 -1px 0 blue;*/
    border-top-color: transparent;
}

JavaScript

$('body').on('click', '.item', function() {
    $(this).toggleClass('item-selected');
});