FreeFrontend

26 CSS Magazine Layouts

February 08, 2017 | 12 Minute Read

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

Demo Image: Magazine Layout
Magazine Layout (demo image)

Magazine Layout

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

download demo and code

See the Pen Magazine Layout by Raisa Y (@raiscake) on CodePen.

Demo Image: Magazine Layout
Magazine Layout (demo image)

Magazine Layout

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

download demo and code

See the Pen Magazine Layout 1 by Adam Norris (@acnorrisuk) on CodePen.

Demo Image: Responsive Journal With CSS Grid
Responsive Journal With CSS Grid (demo image)

Responsive Journal With CSS Grid

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

download demo and code
Demo Image: Magazine Layout
Magazine Layout (demo image)

Magazine Layout

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

download demo and code

See the Pen Magazine Layout - USA Hockey Magazine by Anastasia Lanz (@anastasialanz) on CodePen.

Demo Image: Hero Effect–Magazine
Hero Effect–Magazine (demo image)

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

download demo and code

See the Pen Hero effect–Magazine by Cameron Campbell (@cdcampbell26) on CodePen.

Demo Image: London Fashion Week // CSS Grid
London Fashion Week // CSS Grid (demo image)

London Fashion Week // CSS Grid

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

download demo and code

See the Pen London Fashion Week // CSS Grid by Brian Haferkamp (@brianhaferkamp) on CodePen.

Demo Image: Luminous Magazine
Luminous Magazine (demo image)

Luminous Magazine

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

download demo and code

See the Pen Luminous magazine by Bart Veneman (@bartveneman) on CodePen.

Demo Image: Article Layout
Article Layout (demo image)

Article Layout

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

download demo and code
Demo Image: Magazine Layout
Magazine Layout (demo image)

Magazine Layout

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

download demo and code
Demo Image: Magazine Layout - A Piece Of Pierce
Magazine Layout - A Piece Of Pierce (demo image)

Magazine Layout - A Piece Of Pierce

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

download demo and code

See the Pen Magazine layout - A piece of Pierce by Bart Veneman (@bartveneman) on CodePen.

Demo Image: Article For A Magazine
Article For A Magazine (demo image)

Article For A Magazine

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

download demo and code

See the Pen Article for a Magazine by Yves (@yvesloy) on CodePen.

Demo Image: Magazine Article
Magazine Article (demo image)

Magazine Article

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

download demo and code

See the Pen Article by Patrick Edqvist (@patrickedqvist) on CodePen.

Demo Image: Food Magazine Template
Food Magazine Template (demo image)

Food Magazine Template

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

download demo and code

See the Pen Food Magazine Template by Riccardo Zanutta (@rickzanutta) on CodePen.

Demo Image: Responsive Layout Magazine Style
Responsive Layout Magazine Style (demo image)

Responsive Layout Magazine Style

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

download demo and code
Demo Image: Magazine Layout
Magazine Layout (demo image)

Magazine Layout

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

download demo and code

See the Pen Cothill magazine – chris baker by Chris Baker (@throwtoys) on CodePen.

Demo Image: Magazine Template
Magazine Template (demo image)

Magazine Template

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

download demo and code

See the Pen Magazine Template by NOTBIGMUZZY (@notbigmuzzy) on CodePen.

Demo Image: Magazine Layout Attempt #1
Magazine Layout Attempt #1 (demo image)

Magazine Layout Attempt #1

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

download demo and code

See the Pen Magazine Layout Attempt #1 by Chris Coyier (@chriscoyier) on CodePen.

Demo Image: Magazine Style Article Layout
Magazine Style Article Layout (demo image)

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

download demo and code

See the Pen Magazine Style Article Layout by Sami Taberman (@samit) on CodePen.

Demo Image: Newspaper Style Design
Newspaper Style Design (demo image)

Newspaper Style Design

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

download demo and code

See the Pen Newspaper Style Design by Silke V (@silkine) on CodePen.

Demo Image: Magazine Layout
Magazine Layout (demo image)

Magazine Layout

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

download demo and code

See the Pen Magazine Layout by Dan Andersson (@praktikdan) on CodePen.

Demo Image: Responsive Magazine Layout
Responsive Magazine Layout (demo image)

Responsive Magazine Layout

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

download demo and code
Demo Image: Responsive Magazine Layout
Responsive Magazine Layout (demo image)

Responsive Magazine Layout

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

download demo and code

See the Pen Responsive magazine layout by Mark (@xmark) on CodePen.

Demo Image: Another Magazine Layout
Another Magazine Layout (demo image)

Another Magazine Layout

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

download demo and code

See the Pen another magazine layout by Mark (@xmark) on CodePen.

Demo Image: Magazine Layout Responsive
Magazine Layout Responsive (demo image)

Magazine Layout Responsive

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

download demo and code

See the Pen Magazine layout responsive by Mark (@xmark) on CodePen.

Demo Image: Magazine Layout Attempt #2
Magazine Layout Attempt #2 (demo image)

Magazine Layout Attempt #2

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

download demo and code

See the Pen Magazine Layout Attempt #2 by Chris Coyier (@chriscoyier) on CodePen.

Demo Image: Magazine Layout #2
Magazine Layout #2 (demo image)

Magazine Layout #2

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

download demo and code

See the Pen Magazine Layout #2 by Ricky Eckhardt (@rickyeckhardt) on CodePen.