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

K instalaci tototo skriptu si budete muset nainstalovat rozšíření jako Tampermonkey, Greasemonkey nebo Violentmonkey.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat manažer uživatelských skriptů.

(Už mám manažer uživatelských skriptů, nechte mě ho nainstalovat!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Už mám manažer uživatelských stylů, nechte mě ho nainstalovat!)

// ==UserScript==
// @name         YouTube – Set Custom Number of Videos per Row
// @namespace    http://tampermonkey.net/
// @version      2025-07-23
// @description  after a unwanted change from 4 to 3 vids per row I've to spend time correcting their hiccup
// @author       MaxBrandner
// @license      MIT
// @match        https://www.youtube.com/*
// @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
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Change this number to your desired items per row
    let desiredItemsPerRow = 4;

    function setGridItemsPerRow(itemsPerRow) {
        let allGridRenderers = document.querySelectorAll("ytd-rich-grid-renderer");

        if (allGridRenderers.length > 0) {
            allGridRenderers.forEach(gridRenderer => {
                gridRenderer.style.setProperty("--ytd-rich-grid-items-per-row", itemsPerRow);
            });
            console.log(`Set grid items per row to: ${itemsPerRow} on ${allGridRenderers.length} element(s)`);
        } else {
            console.warn("Grid renderer not found, retrying...");
            setTimeout(() => setGridItemsPerRow(itemsPerRow), 1000);
        }
    }

    function checkGridItemsPerRowChanges(itemsPerRow) {
        let allGridRenderers = document.querySelectorAll("ytd-rich-grid-renderer");
        if (allGridRenderers.length > 0) {
            allGridRenderers.forEach(gridRenderer => {
                const current = window.getComputedStyle(gridRenderer).getPropertyValue("--ytd-rich-grid-items-per-row");
                if (parseInt(current) !== itemsPerRow) {
                    setGridItemsPerRow(itemsPerRow);
                }
            });
        } else {
            console.warn("Grid renderer not found, retrying...");
            setTimeout(() => checkGridItemsPerRowChanges(itemsPerRow), 1000);
        }
    }

    // Monitor changes every 500ms
    setInterval(() => checkGridItemsPerRowChanges(desiredItemsPerRow), 500);
})();