Problem with three.js shader’s column width adjustment

const canvas = document.getElementById('canvas');
    const renderer = new THREE.WebGLRenderer({ canvas });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    const scene = new THREE.Scene();

    const camera = new THREE.OrthographicCamera(
        window.innerWidth / -2, window.innerWidth / 2,
        window.innerHeight / 2, window.innerHeight / -2,
        0.1, 1000
    );
    camera.position.z = 1;

    window.addEventListener('resize', () => {
        const width = window.innerWidth;
        const height = window.innerHeight;
        renderer.setSize(width, height);
        camera.left = width / -2;
        camera.right = width / 2;
        camera.top = height / 2;
        camera.bottom = height / -2;
        camera.updateProjectionMatrix();
    });

    const vertexShader = `
        varying vec2 vUv;
        void main() {
            vUv = uv;
            vec4 modelPosition = modelMatrix * vec4(position, 1.0);
            vec4 viewPosition = viewMatrix * modelPosition;
            vec4 projectionPosition = projectionMatrix * viewPosition;
            gl_Position = projectionPosition;
        }
    `;

    const fragmentShader = `
        uniform float time;
        uniform vec2 resolution;
        uniform vec2 pointer;
        varying vec2 vUv;

        vec3 palette(float t) {
            vec3 a = vec3(0.5, 0.5, 0.5);
            vec3 b = vec3(0.5, 0.5, 0.5);
            vec3 c = vec3(1.0, 1.0, 1.0);
            vec3 d = vec3(0.263, 0.416, 0.557);
            return a + b * cos(6.28318 * (c * t + d));
        }

        void main() {
            vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / resolution.y;
            vec2 uv0 = uv;
            vec3 finalColor = vec3(0.0);
            vec2 gridSize = vec2(6.0, 3.0);
            vec2 gridPos = floor(vUv * gridSize);
            vec2 localUv = fract(vUv * gridSize) - 0.5;
            uv = sin(localUv * 0.5) - pointer;
            float d = length(uv) * exp(-length(uv0));
            vec3 col = palette(length(uv0) + time * 0.4);
            d = sin(d * 8.0 + time) / 8.0;
            d = abs(d);
            d = pow(0.02 / d, 2.0);
            finalColor += col * d;
            gl_FragColor = vec4(finalColor, 1.0);
        }
    `;

    const uniforms = {
        time: { value: 0 },
        resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
        pointer: { value: new THREE.Vector2(0, 0) }
    };

    const material = new THREE.ShaderMaterial({
        vertexShader,
        fragmentShader,
        uniforms
    });

    const geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight);
    const plane = new THREE.Mesh(geometry, material);
    scene.add(plane);

    const clock = new THREE.Clock();
    function animate() {
        uniforms.time.value += clock.getDelta();
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
    }

    animate();

#canvas {
  display: block; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh;
}

<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>