1px gap is not consistent in CSS grid

Question

I want to create a grid of boxes that will have inner border only. For this, I am using background color and gap between grid items but the gap does not look consistent. Can't understand why some lines look thicker than others. I tried to create it with flex but lines look thick there as well. Here is a codepen example of my code. https://codepen.io/anon/pen/PrdKQm

html:

<div id="wrap">
    <div class="box"><div>1</div></div>
    <div class="box"><div>2</div></div>
    <div class="box"><div>3</div></div>
    <div class="box"><div>4</div></div>
    <div class="box"><div>5</div></div>
    <div class="box"><div>6</div></div>
    <div class="box"><div>7</div></div>
    <div class="box"><div>8</div></div>
    <div class="box"><div>9</div></div>
    <div class="box"><div>10</div></div>
    <div class="box"><div>11</div></div>
  <div class="box"><div>12</div></div>
</div>

css:

*{font-family: arial;}

#wrap{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; max-width: 500px; gap: 1px; place-items: end; background: #ccc;}

#wrap>div.box{  height: 0; padding-bottom: 100%; background-color: #fff; width: 100%;}

Answer 1

A lot of calculation needs to be done in the browser here, it will use a close approximation. Imagine the wrap container to have a width of 1001 pixels, now there are 4 containers in it, how to calculate the width and the borders?

My experience: If you want pixel borders, use borders. I have used the old-school "hack" with negative margins like this:

• Use a border on the inner divs and a negative margin to make the boxes overlap
• The wrap container does not have a gap (and no background color)

I have a similar setup here: https://teutonic.co/examples/css-grid#no-gap

The question and answers linked in the comment above is very similar with good examples. Here different borders on different sides are used.