And one of the more interesting uses for these tools is their integration within news and magazine-style websites. They often have more complex and unique layout requirements than other genres. It has led to some very creative solutions.
Today, we’ll show you some exciting examples of both news index page layouts and even a few for individual articles as well. Each one is hosted on CodePen, so you can see exactly how they were created.
Here’s a prime example of CSS Grid’s fitness for a news page. It’s a 12-column layout, with a large feature story up top that takes up two-thirds of the first row. From there, it alternates between one-third and two-thirds stories below and a one-third listing along the right. The look creates a nice balance and allows each story to stand out.
These newfangled CSS techniques are often used to imitate classic print layouts. This magazine layout uses Flexbox to add retro shapes, multicolumn flowing text and a large featured image.
A Fully-Visual Experience
This article layout looks attractive, yet fairly standard on first glance. A massive image on the left is paired up with nice typography on the right. But start scrolling and you’ll see what makes this one stand out. The first section of text scrolls as the image stays in place. Go further and you’re met with full-width images and multiple columns of text. It’s a clever design that will keep readers interested.
The modern age of news sites has made visual stories, ones without a lot of text, quite popular. Here’s an interesting layout that could be a great fit for explaining multistep processes or listing the popular posts of the day.
This CSS Grid-based masonry layout of posts has several things going for it. First, the layout is complex – but without being disorienting. The use of faded background images and legible typography make it easy to distinguish one article from the next. And the stunning hover effects make for a fun and effective user experience.
Break Past Your Limits
So-called “break out” sections are a popular feature within articles. They are great for adding emphasis to important quotes or even images. But the CSS used to require all sorts of hacks in order to get an element to go beyond a fixed-width container. That is, until CSS Grid came along. This example demonstrates just how easy it is to integrate into your layout.
Sometimes it’s nice to see an example layout that eschews content. This makes it easier to grasp, especially if you’re just learning a new technique such as CSS Grid. With a clear outline of each container and helpful terminology, you’ll gain a better understanding of how this one was put together.
Post grids are a terrific solution for both news websites and blogs. A well-designed one is easy to read, provides some whitespace and adds interactivity. All of those traits are well-represented here. The clean card layout is easy on the eyes, while the hover effects give it a high tech feel.
Designing a news-oriented website can be a real challenge. It requires a strategy for getting your best content in front of users while ensuring that it entices them to click. And, once they are reading an article, you want to provide them with the best experience possible.
Thankfully, CSS layouts have never been more capable of helping you achieve these goals. Looks that used to be reserved for desktop publishing software are now easily replicated – as many of the snippets above demonstrate.
The first step is to take some time to think about how you want to present your content. From there, you can use one of these examples as a starting point to make it come to life.
If you’d like to see even more unique layout snippets, check out our CodePen collection.
- Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019
- Keeping Time: A Collection of Clock and Timer Code Snippets
- 8 Snippets That Demonstrate the Repelling Effect in Web Design
- Fun Examples of CSS Imitating Print Design
- 8 Code Snippets That Demonstrate the Power of CSS Grid
- 10 Code Snippets for Creating Masonry Grid Layouts
- Better Layouts Through CSS Flexbox
- 10 HTML & CSS Snippets for Creating Split Screen Layouts