reddit 4 column layout

// ==UserScript==
// u/name         Reddit Four-Column Layout with Zigzag Flow
// u/namespace    http://tampermonkey.net/
// u/version      1.0
// u/description  Modifies Reddit to display content in four columns with a zigzag flow
// u/match        https://*.reddit.com/*
// u/exclude      https://www.reddit.com/r/*/comments/*
// u/exclude      https://www.reddit.com/notifications
// u/grant        none
// ==/UserScript==

(function() {
    'use strict';

    function applyFourColumnLayout(container) {
        container.style.display = 'grid';
        container.style.gridTemplateColumns = 'repeat(4, 1fr)';
        container.style.gap = '15px'; // Reduced gap to accommodate more columns
        container.style.width = '100%';

        let index = 0;
        function processChildren(parent) {
            const children = Array.from(parent.children);
            for (let i = 0; i < children.length; i++) {
                const child = children[i];
                if (child.tagName === 'ARTICLE' || child.tagName === 'FACEPLATE-BATCH') {
                    const row = Math.floor(index / 4);
                    const col = index % 4;

                    child.style.gridArea = `${row + 1} / ${col + 1} / auto / span 1`;
                    child.style.width = '100%';
                    child.style.maxWidth = '100%';

                    if (child.tagName === 'FACEPLATE-BATCH') {
                        child.style.display = 'contents';
                        processChildren(child);
                    } else {
                        index++;
                    }

                    // Handle HR after the article
                    if (i + 1 < children.length && children[i + 1].tagName === 'HR') {
                        const hr = children[i + 1];
                        hr.style.gridArea = `${row + 1} / ${col + 1} / auto / span 1`;
                        hr.style.width = '100%';
                        hr.style.maxWidth = '100%';
                        hr.style.margin = '8px 0'; // Reduced margin
                        i++;
                    }
                }
            }
        }

        processChildren(container);
    }

    function applyLayoutToAll() {
        // Target the grid-container
        const gridContainer = document.querySelector('.grid-container');
        if (gridContainer) {
            gridContainer.style.display = 'block';
            gridContainer.style.width = '100%';
            gridContainer.style.maxWidth = '100%';
        }

        // Target the subgrid-container
        const subgridContainer = document.querySelector('.subgrid-container');
        if (subgridContainer) {
            subgridContainer.style.gridColumn = '1 / -1';
            subgridContainer.style.maxWidth = '100%';
            subgridContainer.style.width = '100%';
            subgridContainer.style.padding = '0 15px'; // Reduced padding
            subgridContainer.style.margin = '0';
            subgridContainer.style.boxSizing = 'border-box';
        }

        // Target the main-container
        const mainContainer = document.querySelector('.main-container');
        if (mainContainer) {
            mainContainer.style.width = '100%';
            mainContainer.style.maxWidth = '100%';
        }

        // Target the main content
        const mainContent = document.getElementById('main-content');
        if (mainContent) {
            mainContent.style.width = '100%';
        }

        // Apply layout to shreddit-feed
        const shredditFeed = document.querySelector('shreddit-feed');
        if (shredditFeed) {
            applyFourColumnLayout(shredditFeed);
        }
    }

    // Function to continuously apply the layout
    function continuouslyApplyLayout() {
        applyLayoutToAll();
        requestAnimationFrame(continuouslyApplyLayout);
    }

    // Start continuously applying the layout
    continuouslyApplyLayout();

    // MutationObserver for dynamic content loading
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'childList') {
                applyLayoutToAll();
            }
        });
    });

    // Start observing the document body for changes
    observer.observe(document.body, { childList: true, subtree: true });
})();