Responsive Grid for WP RSS Aggregator

Working on the main site of Alaya·Net and because we’re not using WP Multisite anymore we need to aggregate the blogs onto the main alaya.net page. We’re using the popular WP RSS Aggregator plugin.

We created the main page to display the aggregated content. This can easily be done by inserting a “WP RSS Aggregator Feeds” block onto a page.

However, the default block that is provided with WP RSS Aggregator is very basic and simply displays the feed as a UL list in one column.

In order to display the content in a responsive, multi-column format we needed to provide custom CSS code. By responsive we mean a layout that adapts to the display of the viewing device. If viewed on a large screen like a desktop monitor the feed may span multiple columns. If viewed on a mobile phone in portrait mode the feed may display as a single column. On a phone in landscape mode it may span two columns.

With the new, excellent WordPress “Twenty Twenty Four” theme, in order to access the customization page where you can add additional CSS you need to manually navigate to the customization URL since, unlike with previous themes, there is no link provided. The link is https://example.org/wp-admin/customize.php

That little bit of magic provides us the opportunity to insert custom CSS code. Again using the Firefox web tools’ inspector we found the element that the grid needs to be applied to: ul.wpra-item-list

Here is basic CSS to display the list in a responsive grid:

ul.wpra-item-list { 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem 0.75rem;
  margin-bottom: 10px;
  padding: 5px;
}

There are other minor customizations that can be made as well, for example we reduced the size of the date font. Using the inspector you can find out which CSS selectors are needed for any further changes you wish to make.

This responsive grid is not the most elegant solution. Perhaps more ideal would be what is called a staggered grid, in which the height of each cell in the grid corresponds to the content length, however CSS doesn’t appear to offer staggered grid functionality, at least not yet. You can see an example of a staggered grid with Android’s Lazy Staggered Grid.

UPDATE: After researching this a bit more, sure enough staggered grid functionality is coming to CSS in the css-grid-3 specification, under which it is referred to as a masonry layout. More info is available in the MDN web docs.

As far as web browsers adopting this updated CSS spec, caniuse.com provides a list of the current state. (Unfortunately adoption seems to be lagging as of early 2024.)

Stefan Judis also made a cool post about the CSS masonry grid layout.

UPDATE 2: We’ve added the experimental masonry layout code to the WP RSS Aggregator feed on the alaya.net main page, so if you enable the flag in Firefox as outlined in Stefan’s post above you can see it in action.

ul.wpra-item-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 1.5rem 0.75rem;
  margin-bottom: 10px;
  padding: 5px;                                                                                 }

@supports (grid-template-rows: masonry) {
  ul.wpra-item-list {
    grid-template-rows: masonry;
  }
}