For those of us who experiment with CSS, it’s an exciting time. The advent of CSS Grid and Flexbox have opened up a whole new world of page layout possibilities.
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 homepage layouts and even a few for individual articles as well.
Great Grid by Marc Müller
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 of stories below and a one-third listing along the right. The look creates an excellent balance and allows each story to stand out.
See the Pen News Layout by Marc Müller
Artistic Touch by Raisa Yang
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.
See the Pen Magazine Layout by Raisa Yang
A Fully-Visual Experience by Brian Haferkamp
This article layout looks attractive yet reasonably standard at first glance. A massive image on the left is paired 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.
See the Pen Article Development // Modular CSS Grid Layout Sections by Brian Haferkamp
Big Steps by Elzette
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.
See the Pen CSS Grid Magazine Layout by Elzette
Masonry Blocks by Kseso
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.
See the Pen CSS Grid Layout as Masonry case study by @Kseso by Kseso
Break Past Your Limits by Steven Monson
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 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.
See the Pen Breaking Out With CSS Grid Layout by Steven Monson
Barebones by Stacy
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.
See the Pen CSS Grid Layout – New Terminology by Stacy
Pretty Posts by Daniel Högel
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.
See the Pen Expandable Post Grid by Daniel Högel
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.
More CSS Snippets for Layouts
Related Topics
- CSS Layouts
- CSS Snippets
- Magazine Layout
- UI Components
Top
