Mastodon Feed Multi-Column Layout

WHAT IT DOES

Mastodon Feed Multi-Column Layout transforms your Mastodon timeline from a single-column feed into a customizable multi-column grid. You can choose between 2, 3, or 4 columns, adjust the column gap, and toggle between standard grid and masonry layout. The panel provides real-time control with sliders and buttons—changes apply instantly as you adjust settings. You can also hide the sidebar to reclaim screen real estate, adjust the overall feed width from 60% to 100%, and the layout automatically adapts to different screen sizes with responsive breakpoints. The layout persists per Mastodon instance using GM_setValue, so your preferences stay consistent across visits. This makes your Mastodon feed more efficient to browse, especially on larger screens, by showing more posts at once and reducing scrolling.

WHERE IT RUNS

This script runs on Mastodon web instances (*.mastodon.social, *.mastodon.online, *.mastodon.*/*). It operates entirely within your browser tab, modifying the page's CSS to restructure the feed layout. The script cannot access other tabs, your browsing history, bookmarks, downloads, or any data outside the current page. All settings—including column count, column gap, feed width, sidebar visibility, masonry layout preference, and auto-apply preference—are stored locally using GM_setValue and never transmitted anywhere.

HOW TO USE

After installing with the BotGentz extension, the script automatically applies your preferred layout to the Mastodon feed (if auto-apply is enabled). Use the panel to customize your view: click 2, 3, or 4 columns to instantly change the layout. Adjust the column gap slider to control spacing between posts, and use the feed width slider to set how much of the screen the feed occupies. Toggle "Hide Sidebar" to remove the right sidebar and expand the feed. Toggle "Masonry Layout" for a Pinterest-style layout where posts fill uneven heights naturally. Click "Apply Layout" to manually reapply the layout after dynamic page updates. Click "Reset to Default" to return to the original Mastodon single-column layout. Use "Copy CSS" to copy the generated CSS to your clipboard.

THE REAL MECHANISM

The script detects the Mastodon feed container using selectors for common Mastodon DOM elements (.column, .feed, .home-timeline, .statuses, .timeline, [role="feed"]). It injects a style element with CSS that sets display: grid on the feed container with grid-template-columns: repeat(N, 1fr), where N is the user-selected column count. The column gap is applied via the gap CSS property. The feed width is controlled via max-width on the container. For the masonry layout, the script adds break-inside: avoid to individual status items, which helps prevent elements from splitting across grid rows in browsers that support CSS multi-column layout. The sidebar is hidden using display: none on sidebar selectors, and the main content area is expanded to full width. Responsive breakpoints are included: on screens under 900px, the layout drops to 2 columns; under 600px, it reverts to a single column. The script also observes the feed container for DOM changes (new posts loading) and reapplies the layout automatically when new content is added.

THE PANEL

The Multi-Column Feed panel is a BGPanel component that you can drag anywhere on your screen by its header. It snaps to the nearest edge when released, keeping your workspace organized. The panel collapses to a small bubble showing only the emoji icon when minimised—click to expand it again. You can resize the panel horizontally to see more of the settings. Press the Escape key to collapse the panel instantly. Your panel position and size are saved per-site.

PLEASE NOTE

This script requires the free BotGentz browser extension to function. Mastodon instances may have custom themes or CSS that conflict with the script's styles—the script uses !important flags to override page styles, but results may vary depending on the instance's customizations. The masonry layout relies on break-inside CSS property, which has varying support across browsers—it works best in Firefox and Chrome. The script applies layout changes to the main feed container; some Mastodon instances may use different class names for their feed containers, which may require updates to maintain compatibility. The script never reads or writes password fields, hidden inputs, or file inputs. It stores only your column count, column gap, feed width, sidebar visibility, masonry layout preference, and auto-apply preference locally. No feed data, account information, or personal information is ever collected, transmitted, or shared.