adobe stock icon Download 10 Free Photos & Assets From Adobe Stock Download Now

This Just In: Excellent News and Magazine CSS Layouts

By
on CSS & Inspiration

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 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.

Great Grid

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.

See the Pen
News Layout
by Marc Müller

Artistic Touch

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

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.

See the Pen
Article Development // Modular CSS Grid Layout Sections
by Brian Haferkamp

Big Steps

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

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

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.

See the Pen
Breaking Out With CSS Grid Layout
by Steven Monson

Barebones

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

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

Good News

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.