☰

YouTube – Set Custom Number of Videos per Row

after a unwanted change from 4 to 3 vids per row I've to spend time correcting their hiccup

  1. // ==UserScript==
  2. // @name         YouTube – Set Custom Number of Videos per Row
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2025-07-23
  5. // @description  after a unwanted change from 4 to 3 vids per row I've to spend time correcting their hiccup
  6. // @author       MaxBrandner
  7. // @license      MIT
  8. // @match        https://www.youtube.com/*
  9. // @icon         https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/YouTube_full-color_icon_%282017%29.svg/1024px-YouTube_full-color_icon_%282017%29.svg.png
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Change this number to your desired items per row
  17.     let desiredItemsPerRow = 4;
  18.  
  19.     function setGridItemsPerRow(itemsPerRow) {
  20.         let allGridRenderers = document.querySelectorAll("ytd-rich-grid-renderer");
  21.  
  22.         if (allGridRenderers.length > 0) {
  23.             allGridRenderers.forEach(gridRenderer => {
  24.                 gridRenderer.style.setProperty("--ytd-rich-grid-items-per-row", itemsPerRow);
  25.             });
  26.             console.log(`Set grid items per row to: ${itemsPerRow} on ${allGridRenderers.length} element(s)`);
  27.         } else {
  28.             console.warn("Grid renderer not found, retrying...");
  29.             setTimeout(() => setGridItemsPerRow(itemsPerRow), 1000);
  30.         }
  31.     }
  32.  
  33.     function checkGridItemsPerRowChanges(itemsPerRow) {
  34.         let allGridRenderers = document.querySelectorAll("ytd-rich-grid-renderer");
  35.         if (allGridRenderers.length > 0) {
  36.             allGridRenderers.forEach(gridRenderer => {
  37.                 const current = window.getComputedStyle(gridRenderer).getPropertyValue("--ytd-rich-grid-items-per-row");
  38.                 if (parseInt(current) !== itemsPerRow) {
  39.                     setGridItemsPerRow(itemsPerRow);
  40.                 }
  41.             });
  42.         } else {
  43.             console.warn("Grid renderer not found, retrying...");
  44.             setTimeout(() => checkGridItemsPerRowChanges(itemsPerRow), 1000);
  45.         }
  46.     }
  47.  
  48.     // Monitor changes every 500ms
  49.     setInterval(() => checkGridItemsPerRowChanges(desiredItemsPerRow), 500);
  50. })();