26 CSS Magazine Layouts

February 8, 2017

Collection of HTML and CSS magazine layouts. Demo and download code (*zip).

Demo Image: Magazine Layout
Demo Image: Magazine Layout

Magazine Layout

HTML and CSS emulating a fashion magazine.
Made by Raisa Y
February 6, 2017

Demo Image: Magazine Layout
Demo Image: Magazine Layout

Magazine Layout

Magazine layout with HTML and CSS.
Made by Adam Norris
January 31, 2017

Demo Image: Responsive Journal With CSS Grid
Demo Image: Responsive Journal With CSS Grid

Responsive Journal With CSS Grid

HTML and CSS responsive magazine layout.
Made by Umberto Junior
January 30, 2017

Demo Image: Magazine Layout
Demo Image: Magazine Layout

Magazine Layout

Magazine layout with HTML and CSS.
Made by Anastasia Lanz
January 28, 2017

Demo Image: Hero Effect–Magazine
Demo Image: Hero Effect–Magazine

Hero Effect–Magazine

A hero image that uses height: 100vh to cover the entire screen for a magazine cover effect. When scrolled, it has a subtle animation similar to opening a magazine.
Made by Cameron Campbell
November 15, 2016

Demo Image: London Fashion Week // CSS Grid
Demo Image: London Fashion Week // CSS Grid

London Fashion Week // CSS Grid

An example of an irregular grid based on a magazine layout.
Made by Brian Haferkamp
October 25, 2016

Demo Image: Luminous Magazine
Demo Image: Luminous Magazine

Luminous Magazine

Another layout experiment.
Made by Bart Veneman
October 8, 2016

Demo Image: Article Layout
Demo Image: Article Layout

Article Layout

Playing around with an article layout. Magazine/responsive.
Made by dominic
August 3, 2016

Demo Image: Magazine Layout
Demo Image: Magazine Layout

Magazine Layout

6 brands for the summer - magazine layout with HTML and CSS.
Made by Bart Veneman
July 22, 2016

Demo Image: Magazine Layout - A Piece Of Pierce
Demo Image: Magazine Layout - A Piece Of Pierce

Magazine Layout - A Piece Of Pierce

HTML and CSS magazine layout.
Made by Bart Veneman
July 21, 2016

Demo Image: Article For A Magazine
Demo Image: Article For A Magazine

Article For A Magazine

This is a flat, modern and responsive article for a magazine.
Made by Yves
July 10, 2016

Demo Image: Magazine Article
Demo Image: Magazine Article

Magazine Article

Magazine article with HTML and CSS.
Made by Patrick Edqvist
May 1, 2016

Demo Image: Food Magazine Template
Demo Image: Food Magazine Template

Food Magazine Template

Responsive food magazine template with HTML, CSS and JavaScript.
Made by Riccardo Zanutta
April 26, 2016

Demo Image: Responsive Layout Magazine Style
Demo Image: Responsive Layout Magazine Style

Responsive Layout Magazine Style

HTML and CSS responsive layout magazine style.
Made by Mark
April 23, 2016

Demo Image: Magazine Layout
Demo Image: Magazine Layout

Magazine Layout

Magazine layout with HTML and CSS.
Made by Chris Baker
April 21, 2016

Demo Image: Magazine Template
Demo Image: Magazine Template

Magazine Template

Magazine template with HTML, CSS and JavaScript.
Made by NOTBIGMUZZY
April 19, 2016

Demo Image: Magazine Layout Attempt #1
Demo Image: Magazine Layout Attempt #1

Magazine Layout Attempt #1

From “Gormet” magazine.
Made by Chris Coyier
January 13, 2016

Demo Image: Magazine Style Article Layout
Demo Image: Magazine Style Article Layout

Magazine Style Article Layout

Magazine style article layout with a full bleed cover hero photo. Inspired by RL Mag.
Made by Sami Taberman
December 15, 2015

Demo Image: Newspaper Style Design
Demo Image: Newspaper Style Design

Newspaper Style Design

Newspaper style design in HTML and CSS.
Made by Silke V
November 10, 2015

Demo Image: Magazine Layout
Demo Image: Magazine Layout

Magazine Layout

A slick design for a magazine on tablets.
Made by Dan Andersson
October 29, 2016

Demo Image: Responsive Magazine Layout
Demo Image: Responsive Magazine Layout

Responsive Magazine Layout

CSS grid layout module.
Made by Heather Buchel
October 26, 2015

Demo Image: Responsive Magazine Layout
Demo Image: Responsive Magazine Layout

Responsive Magazine Layout

Magazine spread style tryouts with HTML and CSS.
Made by Mark
October 23, 2015

Demo Image: Another Magazine Layout
Demo Image: Another Magazine Layout

Another Magazine Layout

Another magazine layout with HTML and CSS.
Made by Mark
October 20, 2015

Demo Image: Magazine Layout Responsive
Demo Image: Magazine Layout Responsive

Magazine Layout Responsive

Responsive magazine layout with HTML and CSS.
Made by Mark
October 19, 2015

Demo Image: Magazine Layout Attempt #2
Demo Image: Magazine Layout Attempt #2

Magazine Layout Attempt #2

Magazine layout attempt #2 with HTML, CSS and JavaScript.
Made by Chris Coyier
October 10, 2015

Demo Image: Magazine Layout #2
Demo Image: Magazine Layout #2

Magazine Layout #2

Magazine layout #2 with HTML and CSS.
Made by Ricky Eckhardt
September 5, 2014

FreeFrontend © 2016 - 2017