Getting an equal 15px border with a grid layout - html

Question

I'm trying to make a grid layout that's responsive with a 15px coloured border, it works ok but it when there's multiple grids, it doubles up the border i.e 30px where it joins.
https://jsfiddle.net/exm8xsgx/
html,
body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
width: 100%;
}
.one {
height: 50vh;
width: 25%;
border-style: solid;
border-color: red;
border-width: 15px;
float: left;
}
<div class="container">
<div class="row">
<div class="one">one</div>
<div class="one">two</div>
<div class="one">three</div>
<div class="one">four</div>
</div>
</div>
This is another method I've tried. When browser width is restricted, the grids start to stack up and the border doubles up again, it should always be 15px whether they are next to each other or stacked.
https://jsfiddle.net/7bxtt82r/24/
html,
body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
width: 100%;
}
.one:first-child {
height: 50vh;
width: 20%;
border-style: solid;
border-color: red;
border-left-width: 15px;
border-top-width: 15px;
border-bottom-width: 15px;
border-right-width: 15px;
float: left;
}
.one:not(:first-child) {
height: 50vh;
width: 20%;
border-style: solid;
border-color: red;
border-left-width: 15px;
border-top-width: 15px;
border-bottom-width: 15px;
border-right-width: 15px;
float: left;
margin-left: -15px;
}
<div class="container">
<div class="row">
<div class="one">one</div>
<div class="one">two</div>
<div class="one">three</div>
<div class="one">four</div>
</div>
</div>
I also don't know how many grids there will be so they will just continue to stack up.

Answer 1

You can use CSS table, and set border-spacing to 15px, example:
body {
margin: 0;
}
.row {
display: table;
table-layout: fixed;
border-collapse: separate;
border-spacing: 15px;
width: 100%;
background: red;
}
.one {
display: table-cell;
background: white;
}
<div class="row">
<div class="one">one</div>
<div class="one">two</div>
<div class="one">three</div>
<div class="one">four</div>
</div>
EDIT
If you need the items to wrap for different viewport width, you can use flexbox + box-shadow + media queries.
body {
margin: 0;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 15px;
}
.one {
flex-basis: 25%;
box-shadow: 0 0 0 15px red;
background: white;
}
#media (max-width: 992px) {
.one {
flex-basis: 50%;
margin-bottom: 15px;
}
}
#media (max-width: 768px) {
.one {
flex-basis: 100%;
}
}
<div class="row">
<div class="one">one</div>
<div class="one">two</div>
<div class="one">three</div>
<div class="one">four</div>
</div>

Answer 2

Your external borders can stay on 15px but the border which touches another one has to be devided by 2 if you want a clean look with a same border around.
I used a default border of 10px and 20px for those not touching each other. (You can do the opposite: default 20px and 10px for those touching)
I dealt with this while building my simon game here
.squareCircled {
height: 250px;
width: 250px;
border: 10px solid gray;
}
.green {
background-color:#01B600; /*green*/
border-top-left-radius: 100%;
border-top:20px solid gray;
border-left:20px solid gray;
cursor: pointer;
}