Script funziona solo se vado in "ispeziona"

Ciao,
ho realizzato questo codice per aumentare e diminuire le colonne di una griglia con JavaScript usando gli attributi "data-*":

Codice:

---

const addMultipleListeners = (el, types, listener, options, useCapture) => {
  types.forEach(type =>
    el.addEventListener(type, listener, options, useCapture)
  );
};
addMultipleListeners(
  window,
  ['resize', 'load'],
  () => {
var grid = document.getElementById('grid');
    if (window.innerWidth < 600) {
                grid.setAttribute('data-columns','1');
        } else if (window.innerWidth < 700) {
                grid.setAttribute('data-columns','2');
        } else if (window.innerWidth < 800) {
                grid.setAttribute('data-columns','3');
        } else if (window.innerWidth < 900) {
                grid.setAttribute('data-columns','4');
        } else if (window.innerWidth < 1000) {
                grid.setAttribute('data-columns','5');
        } else if (window.innerWidth < 1200) {
                grid.setAttribute('data-columns','6');
        } else if (window.innerWidth < 1400) {
                grid.setAttribute('data-columns','7');
        } else if (window.innerWidth < 1600) {
                grid.setAttribute('data-columns','8');
        } else if (window.innerWidth < 1700) {
                grid.setAttribute('data-columns','9');
        }
});

---

ma funziona solo quando vado in ispeziona e se provo a ridurre la pagina in realtà non segue le indicazioni come in ispeziona ma si ferma a 6 colonne quando dovrebbe arrivare a 8.

Qualcuno mi può aiutare?
Grazie

Salve,
a prima vista così il codice mi sembra a posto. Sarebbe però utile disporre di un demo per poter testare il codice.

Può riportare un link ad una pagina dimostrativa in cui fa uso del codice?

Cordiali saluti.

ecco il link:http://tuttainformatica.altervista.o...php?p=g&m=grid
praticamente per la dimensione del mio schermo io dovrei vedere 8 colonne quando carico la pagina e invece ne vedo 9, poi se vado in ispeziona diventano 8 oppure se riduco chrome manualmente le colonne diminuiscono e aumentano. Se chiudo ispeziona oppure riporto chrome a tutto schermo rimangono 8 colonne

Ho fatto alcune prove, ma non ho capito da cosa possa dipendere quel comportamento.

Ha provato anche usando solo i flexbox?

Qualcosa del genere:

Codice HTML:

---

<style>
.flexBox {
  display: flex;
  flex-wrap: wrap;
  background-color: #CCCCCC;
}
.flessibile4 > div {
  width: 100px;
  margin: 10px;
}
</style>
<div class="flexBox">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  ............
  <div>25</div>
</div>

---

Cordiali saluti

Sto provando anche i flexbox... vedo se riesco a combinare qualcosa... sto ancora sperimentando