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 kommentar(er)
