That is, until I found a workaround!Īfter looking at several tutorials on CSS Grid, I found that they largely fall into two camps: Media queries appeared to be the only solution. The approach sounded tempting, but when I started introducing column-spanning elements, I ran into trouble with the grid overflowing on narrow screens. Right? But do we actually need those media queries - and all the hassle of identifying break points - when we can use grid’s auto-fit options to automatically create a fluid responsive grid for us? This seems like an ideal case for CSS Grid! Create a grid layout for different layouts, say, one five-column layout and one three-column layout, then use media queries to switch between them at different break points.

The plugin’s default list UI is rather bland, so I wanted to style it to look like a newspaper or magazine website with a mixture of smaller and larger “featured content” panels. The hard part was making it all look awesome. For that, we used a WordPress plugin, Feedzy lite, which can aggregate multiple feeds into a single time-ordered list - perfect for showcasing their latest offerings. The easy part was grabbing a list of posts with excerpts from our favorite RSS feeds. The idea was to offer readers a selection of latest posts from those blogs in a magazine-style layout, instead of just popping a list of our favorite blogs in the sidebar.

I was recently working on a modern take of the blogroll.

Asymmetrical modular grids