Как сделать такой border у блоков?

Question

[HellYeahOmg]

Как сверстать, чтобы границы блоков не наслаивались по всем граням?
Таблицы использовать нельзя.

Answer 1

[Кристина]

border: 1px solid #000;
margin:-1px 0 0 -1px;

Или вот такой хак нашла) https://codepen.io/anon/pen/ZqaXNy

.item{
  width: 200px;
  height: 200px;
  box-shadow: 
    1px 0 0 0 #000, 
    0 1px 0 0 #000, 
    1px 1px 0 0 #000,
    1px 0 0 0 #000 inset, 
    0 1px 0 0 #000 inset;
}

Answer 2

[азаза]

таблицей проще

table{border-collapse:collapse;}
table td{border:1px solid #999;}

блоками, все что приходит на ум ))

.container{border-right:1px solid #999; border-top:1px solid #999;
display:grid; grid-template-columns:repeat(3, 1fr);}
.container div{border-left:1px solid #999; border-bottom:1px solid #999;}

<div class="container">
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
</div>

или так

<div class="container">
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    ...
</div>

.container {
    display: table;
    border-collapse: collapse;
}
.column {
    float: left;
    overflow: hidden;
    width: 120px;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    width: 120px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 3

[Юпитер Макс]

да просто

.block:nth-child(2n+2){
    border-right:none;
}

ну и т.д.

Comments

[Ankhena]

При таком варианте придется переписывать в media.
И в любом случае лучше добавлять границу там, где она нужна, а не перебивать свойство.