![]() ![]() The page displays around 50 posts, but the layout code is agnostic as to the number of items displayed. This magazine-style grid layout is fully responsive with the colored featured panels adjusting dynamically as the number of columns change. Here’s a visual showing the RSS plugin right out of the box and what it’ll look like after we style it up. The beauty is that once you understand the limitations of responsive grids, and why and when column spans break grid responsiveness, it is possible to define a responsive magazine/news style layout in just a dozen lines of code plus one simple media query (or even with no media queries if you are willing to limit your span options). I want to make the grid do both: create a fully responsive fluid layout that includes responsively resizing multi-column elements as well. Tutorials that explain how to make a responsive grid that resizes automatically, but with all of the grid items the same width (i.e.Tutorials that show you how to create an interesting layout with spanned elements, but for a fixed number of columns.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. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |