Using the following HTML why adding border mis-aligns the children:https://jsfiddle.net/7dp2uqe8/
<style type="text/css"> .flex { display: flex; } .flex-item { flex: 1 0 0; text-align: center; } .grid { display: grid; grid-template-columns: repeat(6, 1fr); } .grid-item { } .add-border :not(:last-of-type) { border-right: 1px solid #000; }</style><h4>No Border</h4><div class="grid"><div class="grid-item" style="background: #f00;">Item 1</div><div class="grid-item" style="background: #0f0;">Item 2</div><div class="grid-item" style="background: #00f;">Item 3</div><div class="grid-item" style="background: #ff0;">Item 4</div><div class="grid-item" style="background: #f0f;">Item 5</div><div class="grid-item" style="background: #0ff;">Item 6</div></div><div class="flex"><div class="flex-item" style="background: #f00;">Item 1</div><div class="flex-item" style="background: #0f0;">Item 2</div><div class="flex-item" style="background: #00f;">Item 3</div><div class="flex-item" style="background: #ff0;">Item 4</div><div class="flex-item" style="background: #f0f;">Item 5</div><div class="flex-item" style="background: #0ff;">Item 6</div></div><h4>Border</h4><div class="grid add-border"><div class="grid-item" style="background: #f00;">Item 1</div><div class="grid-item" style="background: #0f0;">Item 2</div><div class="grid-item" style="background: #00f;">Item 3</div><div class="grid-item" style="background: #ff0;">Item 4</div><div class="grid-item" style="background: #f0f;">Item 5</div><div class="grid-item" style="background: #0ff;">Item 6</div></div><div class="flex add-border"><div class="flex-item" style="background: #f00;">Item 1</div><div class="flex-item" style="background: #0f0;">Item 2</div><div class="flex-item" style="background: #00f;">Item 3</div><div class="flex-item" style="background: #ff0;">Item 4</div><div class="flex-item" style="background: #f0f;">Item 5</div><div class="flex-item" style="background: #0ff;">Item 6</div></div>Adding a Transparent border to the last cell resolve the issue, but visually it throws off the appearance. .add-border :not(:last-of-type) { border-right: 1px solid transparent; }
Rendering this code on the latest version of Chrome (140.0.7339.81) and Firefox (142.0.1) and Edge (139.0.3405.125) results are the same.
