Preventing double borders in CSS Grid

Question

Given the current CSS grid example, how can I collapse the borders in order to avoid the double borders ?

This is such a simple thing to achieve using an Html table. How do I do it using display: grid ?

.wrapper {    display: grid;    grid-template-columns: 50px 50px 50px 50px;  }    .wrapper > div {    padding: 15px;    text-align: center;    border: 1px solid black;  }

<div class="wrapper">    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>    <div>5</div>    <div>6</div>    <div>7</div>    <div>8</div>  </div>

Answer 1

Instead of using an actual border around grid items, use the background color on the container (for "border" color) and the grid-gap property (for "border" width).

.wrapper {    display: inline-grid;    grid-template-columns: 50px 50px 50px 50px;    border: 1px solid black;    grid-gap: 1px;    background-color: black;  }    .wrapper > div {    background-color: white;    padding: 15px;    text-align: center;  }

<div class="wrapper">    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>    <div>5</div>    <div>6</div>    <div>7</div>    <div>8</div>  </div>