Responsive Grid for FreshRSS Reading View Mode

If you are viewing your feeds in FreshRSS using reading view mode you can easily display the feed items in a responsive grid layout.

You need to install the Custom RSS extension from the FreshRSS extensions. This involves downloading the extensions from the foregoing link and copying xExtension-CustomCSS to your /extensions directory.

Click the gear icon at the upper-right of the FreshRSS page and under Configuration on the left select Extensions. Toggle Custom CSS on and click the gear icon next to it.

In the Additional CSS rules text input area add:

main#stream.reader {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.4rem 0.4rem;
  margin-bottom: 10px;
  padding: 5px;
  width: 82%;
  margin: auto;
}

@supports (grid-template-rows: masonry) {
  main#stream.reader {
    grid-template-rows: masonry;
  }
}

This CSS creates a masonry grid layout if support is enabled in the browser. See our previous post Responsive Grid for WP RSS Aggregator for more info about the masonry grid layout. That post also discusses responsive layouts.