Сетка CSS ломается при увеличении (из-за ошибки округления?)

Question

Я хочу создать сетку, которая разбита на несколько частей. Я использую следующий шаблон:

<div id="grid">
   <div id="row">
      <div id="cell"></div>
      <div id="cell"></div>
   </div>
   <div id="row">
      <div id="cell"></div>
      <div id="cell"></div>
   <div>
</div>
<style>
   .cell {
      float: left;
      display: flex;
      justify-content: center;
      height: 120px;
      width: 120px;
      border: 5px solid #efefef;
   }
<style>

Затем я меняю цвета некоторых границ, чтобы получить границы частей внутри сетки. Однако, когда я увеличиваю или уменьшаю масштаб (из-за ошибок округления?), CSS идет не так (см. Рисунок): Сетка увеличена 125%

Как лучше всего решить эту проблему?