質問失礼します。

3 列の余白の指定について

まず、3 列になると隙間は 16px が二つになるのでこちらは 32px にします

とありますが、ここの挙動がいまいち理解できていません。

例えば下記のように 31px と指定しても 2 列のままです。

@media (min-width: 600px) {
  body {
    background: pink;
  }

  .products li {
    width: calc((100% - 31px) / 3);

  }
}

なぜ 32px だと 3 列になり、32px に満たないと 3 列にならないのでしょうか。
また、33px からの挙動もあわせて教えていただけますと幸いです。

よろしくお願いします。