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%;}

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:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With