Script funziona solo se vado in "ispeziona"

[tuttainformatica]

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

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

[GraphOGLRisorse]

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.

[tuttainformatica]

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

[GraphOGLRisorse]

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

Ha provato anche usando solo i flexbox?

Qualcosa del genere:

<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

[tuttainformatica]

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