38 CSS Magazine Layouts
Collection of HTML and CSS magazine layouts. Update of May 2018 collection. 6 new items.
Related Articles
About the code
Full spread magazine layout
Full spread magazine layout - CSS Grid Layout
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
Grid Magazine Typography
HTML and CSS grid magazine typography.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
Red Onion's: The Daily Prophet
A copy of the Red Onion's Daily Prophet using Flexbox.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
Responsive Multicol Magazine Layout
"Visiting Vancouver, I was very impressed with the layout of "Montecristo Magazine", but disappointed that their online presence didn't reflect that. This is my design to improve on that." - Dudley Storey
About the code
Magazine Layout
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
Dynamic Newspaper w/CSS Grid
Automatically loads latest stories on refresh. Layout is done with CSS Grid. Built with HTML5, CSS3, JavaScript, jQuery and the News API.
About the code
Grid Experiment No. 4
Recreation of a print menu from "The Phoenicia Diner in Phoenicia", NY using CSS grid
.
About the code
Apple Magazine
CSS Grid, Flexbox, blend-mode
s and Apple.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
CSS Grid Magazine Layout
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
Grid Experiment No. 3
Recreation of a print layout from "The Intelligent Lifestyle Magazine" book using CSS grid
.
About the code
Print Layout From The Intelligent Lifestyle Magazine #1
Recreation of a print layout from The Intelligent Lifestyle Magazine book using CSS Grid.
About the code
Print Layout From The Intelligent Lifestyle Magazine #2
Recreation of a print layout from The Intelligent Lifestyle Magazine book using CSS Grid.
Magazine Layout
HTML and CSS emulating a fashion magazine.
Made by Raisa Y
February 6, 2017
Magazine Layout
Magazine layout with HTML and CSS.
Made by Adam Norris
January 31, 2017
Responsive Journal With CSS Grid
HTML and CSS responsive magazine layout.
Made by Umberto Junior
January 30, 2017
Magazine Layout
Magazine layout with HTML and CSS.
Made by Anastasia Lanz
January 28, 2017
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
London Fashion Week // CSS Grid
An example of an irregular grid based on a magazine layout.
Made by Brian Haferkamp
October 25, 2016
Luminous Magazine
Another layout experiment.
Made by Bart Veneman
October 8, 2016
Article Layout
Playing around with an article layout. Magazine/responsive.
Made by dominic
August 3, 2016
Magazine Layout
6 brands for the summer - magazine layout with HTML and CSS.
Made by Bart Veneman
July 22, 2016
Magazine Layout - A Piece Of Pierce
HTML and CSS magazine layout.
Made by Bart Veneman
July 21, 2016
Article For A Magazine
This is a flat, modern and responsive article for a magazine.
Made by Yves
July 10, 2016
Magazine Article
Magazine article with HTML and CSS.
Made by Patrick Edqvist
May 1, 2016
Food Magazine Template
Responsive food magazine template with HTML, CSS and JavaScript.
Made by Riccardo Zanutta
April 26, 2016
Responsive Layout Magazine Style
HTML and CSS responsive layout magazine style.
Made by Mark
April 23, 2016
Magazine Layout
Magazine layout with HTML and CSS.
Made by Chris Baker
April 21, 2016
Magazine Template
Magazine template with HTML, CSS and JavaScript.
Made by NOTBIGMUZZY
April 19, 2016
Magazine Layout Attempt #1
From “Gormet” magazine.
Made by Chris Coyier
January 13, 2016
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
Newspaper Style Design
Newspaper style design in HTML and CSS.
Made by Silke V
November 10, 2015
Magazine Layout
A slick design for a magazine on tablets.
Made by Dan Andersson
October 29, 2016
About the code
Responsive Magazine Layout
Playing around with the new CSS Grid module spec and Flexbox.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Responsive Magazine Layout
Magazine spread style tryouts with HTML and CSS.
Made by Mark
October 23, 2015
Another Magazine Layout
Another magazine layout with HTML and CSS.
Made by Mark
October 20, 2015
Magazine Layout Responsive
Responsive magazine layout with HTML and CSS.
Made by Mark
October 19, 2015
Magazine Layout Attempt #2
Magazine layout attempt #2 with HTML, CSS and JavaScript.
Made by Chris Coyier
October 10, 2015
Magazine Layout #2
Magazine layout #2 with HTML and CSS.
Made by Ricky Eckhardt
September 5, 2014