1. Local Histories
Print brochure remade with CSS Grid. Not yet responsive, but soon to be.
Author: Tatiana Mac (tatianamac)
Links: Source Code / Demo
Created on: June 16, 2019
Made with: HTML, CSS
Tags: css-grid, typography
2. Article Development // Modular CSS Grid Layout Sections
This shows how you can use modular code snippets to rapidly create an art-directed article page.
Author: Brian Haferkamp (brianhaferkamp)
Links: Source Code / Demo
Created on: April 16, 2019
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: modular, css, css-grid
3. Magazine Grid Layout Vol. II
Responsive grid layout for #CodePenChallenge Stellar Scientists—a tribute to Albertus Seba. Experimenting with responsive CSS Grid + CSS Columns properties.
Author: ilithya (ilithya)
Links: Source Code / Demo
Created on: March 28, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: grid, responsive, cssvariables, ui, ux
4. Magazine Grid Layout
Responsive grid layout for #CodePenChallenge Art Icons—a tribute to Salvador Dalí. Playing with CSS Grid + CSS Columns + CSS Shape Outside properties.
Author: ilithya (ilithya)
Links: Source Code / Demo
Created on: March 10, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: grid, responsive, cssvariables, ui, ux
5. Full Spread Magazine Layout // CSS Grid Layout
Author: Brian Haferkamp (brianhaferkamp)
Links: Source Code / Demo
Created on: November 21, 2018
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
6. CSS Grid Magazine Typography
Author: Kam Black (kamblack)
Links: Source Code / Demo
Created on: September 19, 2018
Made with: HTML, SCSS
7. Red Onion's: The Daily Prophet
I created a copy of the Red Onion's Daily Prophet (http://redonion.se/cssgrid/) using flexbox. All rights reserved to Red Onion (http://redonion.se/en/home/).
Author: Ana Liza Pandac (analizapandac)
Links: Source Code / Demo, Redonion.se, Redonion.se
Created on: September 12, 2018
Made with: HTML, SCSS
Tags: flexbox, flex-layout
8. 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.
Author: Dudley Storey (dudleystorey)
Links: Source Code / Demo
Created on: May 17, 2018
Made with: HTML, SCSS
Tags: magazine layout
9. 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.
Author: Dudley Storey (dudleystorey)
Links: Source Code / Demo
Created on: May 17, 2018
Made with: HTML, SCSS
Tags: magazine layout
10. 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.
Author: Jarrod Yellets (jarrodyellets)
Links: Source Code / Demo
Created on: February 16, 2018
Made with: HTML, CSS, JS
Tags: newspaper, news, css-grid
11. Grid Experiment No. 4
Recreation of a print menu from The Phoenicia Diner in Phoenicia, NY using CSS Grid.
Author: Jules Forrest (julesforrest)
Links: Source Code / Demo
Created on: January 14, 2018
Made with: HTML, SCSS
Tags: grid, css-grid, menu, typography, design
12. Magazine Css Grid
Author: Andrew (andrewrock)
Links: Source Code / Demo
Created on: October 25, 2017
Made with: HTML, SCSS
Tags: cssgrid, css-grid, flex-box, blend-mode, landing-page
13. CSS Grid Magazine Layout
Author: Elzette (semblance)
Links: Source Code / Demo
Created on: October 15, 2017
Made with: HTML, CSS
14. Grid Experiment No. 3
Recreation of a print layout from The Intelligent Lifestyle Magazine book using CSS Grid.
Author: Jules Forrest (julesforrest)
Links: Source Code / Demo
Created on: September 4, 2017
Made with: HTML, CSS
Tags: grid, css-grid, editorial, layout
15. Grid Experiment No. 1
Recreation of a print layout from The Intelligent Lifestyle Magazine book using CSS Grid.
Author: Jules Forrest (julesforrest)
Links: Demo
Created on: September 2, 2017
Made with: HTML, CSS
Tags: css-grid, grid, editorial, layout
16. Grid Experiment No. 2
Recreation of a print layout from The Intelligent Lifestyle Magazine book using CSS Grid.
Author: Jules Forrest (julesforrest)
Links: Demo
Created on: September 3, 2017
Made with: HTML, SCSS
Tags: css-grid, editorial, layout, grid
17. CSS Grid Layout Module - Responsive Magazine Layout
Playing around with the new css grid module spec and flexbox. In Chrome, you'll have to head to chrome://flags and enable "Experimental Web Platform Features" for this layout to work. I'm sure it looks pretty not great in all other browsers. This article was a lot of help: https://hacks.m...
Read More
Author: Heather Buchel (hbuchel)
Links: Source Code / Demo, Hacks.mozilla.org
Created on: October 24, 2015
Made with: HTML, SCSS
Tags: css grid layout module, flexbox, magazine
18. Responsive Magazine Layout
Magazine spread style tryouts
Author: Mark (xmark)
Links: Source Code / Demo
Created on: October 19, 2015
Made with: HTML, Less
Tags: magazine layout, responsive, magazine spread
19. Magazine Layout 1
Author: Adam Norris (acnorrisuk)
Links: Source Code / Demo
Created on: April 5, 2016
Made with: HTML, SCSS
Tags: print, css, magazine
20. Responsive HFG Ulm Journal With CSS Grid
Author: Umberto Junior (umbertojunior)
Links: Source Code / Demo
Created on: November 17, 2016
Made with: HTML, CSS
21. Magazine Layout - USA Hockey Magazine
Using CSS 'clip-path' that works in Chrome and Safari. An article I found from the USA Hockey magazine, January 2017. http://www.usahockeymagazine.com/article/2017-01/long-road-home Article by Jess Myers. Photo credit by Josh Elsass.
Author: Anastasia Lanz (anastasialanz)
Links: Source Code / Demo
Created on: January 26, 2017
Made with: Slim, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: magazine layout
22. 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. Hero base from Corey Collins' Hero Pen: http://codepen.io/coreymcollins/pen/vLdyGm
Author: Cameron Campbell (cdcampbell26)
Links: Source Code / Demo
Created on: February 4, 2016
Made with: HTML, SCSS, JS
23. London Fashion Week // CSS Grid
An example of an irregular grid based on a magazine layout.
Author: Brian Haferkamp (brianhaferkamp)
Links: Source Code / Demo
Created on: October 25, 2016
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: columns, css, css-grid, fashion, magazine
24. Luminous Magazine
Author: Bart Veneman (bartveneman)
Links: Source Code / Demo
Created on: October 8, 2016
Made with: Slim, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: magazine layout, experiment, layout, typgraphy, dribbble
25. Magazine Style Article Layout
Magazine style article layout with a full bleed cover hero photo. Inspired by RL Mag.
Author: Sami Taberman (samit)
Links: Source Code / Demo
Created on: October 5, 2015
Made with: HTML, Sass, JS
26. 6 Brands For The Summer - Magazine Layout
Author: Bart Veneman (bartveneman)
Links: Source Code / Demo
Created on: July 22, 2016
Made with: Slim, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: magazine, layout
27. Magazine Layout - A Piece Of Pierce
Author: Bart Veneman (bartveneman)
Links: Source Code / Demo
Created on: January 9, 2016
Made with: Slim, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: magazine, layout
28. Article For A Magazine
This is a flat, modern and responsive Article for a Magazine.
Author: Yves (yvesloy)
Links: Source Code / Demo
Created on: February 26, 2016
Made with: HTML, CSS, JS
Tags: article, header, image, hero, modern
29. Article
Inspired by style and text from the magazine 365 by Naturkompaniet. The language is Swedish if you want to translate.
Author: Patrick Edqvist (patrickedqvist)
Links: Source Code / Demo
Created on: May 1, 2016
Made with: HTML, SCSS
Tags: article, typography
30. Food Magazine Template
Responsive Food Magazine Template - Freebie. Design from: https://dribbble.com/shots/2280188-Food-Magazine-Template // jQuery.animate is horrible => I'm lazy
Author: Riccardo Zanutta (rickzanutta)
Links: Source Code / Demo
Created on: November 19, 2015
Made with: Pug, Stylus, JS
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: template, animation, svg, menu, free
31. Responsive Layout Magazine Style
Author: Mark (xmark)
Links: Source Code / Demo
Created on: April 23, 2016
Made with: HTML, Less
Tags: responsive, magazine-layout
32. Magazine Template
Author: NBM (notbigmuzzy)
Links: Source Code / Demo
Created on: April 19, 2016
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: magazine, animation, fun, template, cover
33. Magazine Layout Attempt
Author: Chris Coyier (chriscoyier)
Links: Source Code / Demo
Created on: October 10, 2015
Made with: HTML, SCSS
Tags: magazine, layout
34. Magazine Style Article Layout
Magazine style article layout with a full bleed cover hero photo. Inspired by RL Mag.
Author: Sami Taberman (samit)
Links: Source Code / Demo
Created on: October 5, 2015
Made with: HTML, Sass, JS
35. Newspaper Style Design
Just experimenting a bit around with what you can do with webfonts and ligatures and only two font families: Playfair (Google Webfont) and Droid Serif (Google Webfont). Trying to find that one or two tweaks to make the design feel newspapery.
Author: Silke V (silkine)
Links: Source Code / Demo
Created on: August 30, 2014
Made with: HTML, CSS
Tags: typography, ligatures, webfonts, newspaper, css
36. Magazine Layout
A slick design for a magazine on tablets.
Author: Dan Andersson (praktikdan)
Links: Source Code / Demo
Created on: October 12, 2015
Made with: HTML, Sass, JS
37. Responsive Magazine Layout
Magazine spread style tryouts
Author: Mark (xmark)
Links: Source Code / Demo
Created on: October 19, 2015
Made with: HTML, Less
Tags: magazine layout, responsive, magazine spread
38. Another Magazine Layout
Author: Mark (xmark)
Links: Source Code / Demo
Created on: October 19, 2015
Made with: HTML, Less
Tags: magazine layout, responsive, magazine spread
39. Magazine Layout Responsive
responsive magazine layout
Author: Mark (xmark)
Links: Source Code / Demo
Created on: October 19, 2015
Made with: HTML, Less
Tags: magazine layout, responsive, magazine spread
40. Magazine Layout Attempt 2
This one is from Scientific American.
Author: Chris Coyier (chriscoyier)
Links: Source Code / Demo
Created on: October 10, 2015
Made with: HTML, SCSS, JS
Tags: magazine, layout
41. Magazine Layout - Batman!
.net is more than for reading. I love the layouts! This is the welcome layout'ish used in issue 256. I was watching The Spirit of the Web by Jeremy Keith at the same time, so I tired to cut all the html tags and CSS I could. Video Inspiration: https://vimeo.com/54527782 Layout Inspiratio...
Read More
Author: Ricky Eckhardt (rickyeckhardt)
Links: Source Code / Demo
Created on: September 5, 2014
Made with: Slim, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: layout, slim, sass, magazine, responsive
42. Pure CSS Magazine Style Layout With Transitions
Inspired by the following https://dribbble.com/shots/6590909-Cult-Fashion
Author: Jamie Coulter (jcoulterdesign)
Links: Source Code / Demo
Created on: June 6, 2019
Made with: Haml, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Haml
Tags: magazine, pure-css, layout, transitions, concept
43. Responsive Magazine Layout 3
Practicing new page layouts with HTML, CSS Columns and Flexbox.
Author: Ricardo Velarde (rvelarde)
Links: Source Code / Demo
Created on: August 5, 2018
Made with: HTML, CSS
Tags: flexbox, magazine layout, editorial design, page-layout, css-columns
44. Magazine Layout
Emulating a fashion magazine spread found here: http://www.touchey.com/post/15395830073/10-awesome-fashion-magazines-layouts Work-in-progress! Will work out kinks soon.
Author: Raisa Yang (raiscake)
Links: Source Code / Demo
Created on: February 5, 2017
Made with: HTML, SCSS
45. Magazine Layout (Wired) - The Grim Future Of Work
A pure HTML/CSS remake of the "Paid to Play: Videogames are the Grim Future of Work" article by Clive Thompson featured in the March 2017 issue of Wired magazine. https://www.wired.com/2017/02/clive-thompson-future-of-work-is-gaming/
Author: Christian Gaetano (cgatno)
Links: Source Code / Demo
Created on: February 23, 2017
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: codepenpgh, magazine, flexbox, wired, responsive
46. Communication Arts Magazine Design // CSS Grid
Author: Brian Haferkamp (brianhaferkamp)
Links: Source Code / Demo
Created on: November 17, 2016
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
47. Magazine Layout - Crossing Borders In Funk And Jazz
Taken from http://designspiration.net/search/saves/page/2/?q=layout
Author: Bart Veneman (bartveneman)
Links: Source Code / Demo
Created on: January 10, 2016
Made with: Slim, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: magazine, layout
48. Communication Arts Magazine Design // CSS Grid
Author: Brian Haferkamp (brianhaferkamp)
Links: Source Code / Demo
Created on: November 17, 2016
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
49. Web-Safe Magazine Layout // 04 // CSS Grid
A full-page responsive design utilizing CSS Grid. Full-bleed images and columns give the page a magazine-like feel.
Author: Brian Haferkamp (brianhaferkamp)
Links: Source Code / Demo
Created on: April 7, 2017
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: magazine, grid, responsive, images, columns
50. Small Wonders Article
An article design based on this layout: https://s-media-cache-ak0.pinimg.com/736x/06/f4/2a/06f42afedb3c123913797d5d84a516a2.jpg This design utilizes CSS columns, absolute positioning, and the :first-letter pseudo property.
Author: Brian Haferkamp (brianhaferkamp)
Links: Source Code / Demo
Created on: October 19, 2016
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: butterfly, columns, magazine
51. Responsive Magazine Layout
Experimenting with new page layouts with HTML/CSS. The idea was to play with a nonstandard grid.
Author: Ricardo Velarde (rvelarde)
Links: Source Code / Demo
Made with: HTML, CSS, JS
52. Magazine Cover Layout
Reproduce a magazine cover layout using CSS and HTML. Cover template from Urban Print: https://www.lucidpress.com/pages/templates/magazines/urban-print-magazine-template
Author: Steve Hanlon (SixStringsCoder)
Links: Source Code / Demo
Created on: February 20, 2020
Made with: HTML, CSS
Tags: magazine, layout, hsla
53. Crisp Magazine Layout Design
This is layout practice using an MIT Tech article from this issue: https://www.technologyreview.com/s/614892/keynes-was-wrong-gen-z-will-have-it-worse/
Author: Steve Hanlon (SixStringsCoder)
Links: Source Code / Demo
Created on: January 21, 2020
Made with: HTML, CSS
Tags: layout, magazine
54. Recreating Print Layouts With CSS
Inspired by a magazine layout.
Author: miranda (mirandalwashburn)
Links: Source Code / Demo
Created on: December 23, 2019
Made with: HTML, CSS
Tags: magazine, layout, print, mockup, landingpage
55. Open-magazine-layout: CSS Grid
CSS Grid experiment: magazine layout
Author: tripti (tripti1410)
Links: Source Code / Demo
Created on: July 27, 2019
Made with: HTML, CSS
Tags: css-grid, layout, magazine, svg
56. Magazine Layout Shapes, Clip-path And CSS Grid
A Magazine style layout demo using shapes, clip-path and CSS Grid to wrap, form and layout content in a
Author: Mandy Michael (mandymichael)
Links: Source Code / Demo
Created on: April 5, 2019
Made with: HTML, SCSS
Tags: css-grid, shape-outside, clip-path, layout, magazine
57. CSS Grid Wired Magazine Layout
Practicing CSS Grid by taking a magazine layout and redoing it in Grid
Author: Christina Gorton (cgorton)
Links: Source Code / Demo
Created on: October 15, 2017
Made with: HTML, SCSS
Tags: css-grid, magazine, layout, css
58. Dwell Magazine / CSS Grid Example
Taking inspiration from a recent Dwell Magazine article, I re-created the page using CSS Grid for the layout.
Author: Erick Arbe (erickarbe)
Links: Source Code / Demo
Created on: May 16, 2017
Made with: HTML, CSS
Tags: css-grid, dwell, magazine, layout
59. Responsive Card Layout With CSS Grid
Author: Dave (theyve)
Links: Source Code / Demo
Created on: September 15, 2017
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: grid, layout, cards, media element, magazine
60. CSS Grid Magazine Style Layout
This article: https://theoutline.com/post/1424/hawaii-s-online-gaming-curse with this style layout: https://heyjudka.files.wordpress.com/2011/11/grid_trace61.jpg
Author: Varun Vachhar (winkerVSbecks)
Links: Source Code / Demo
Created on: May 11, 2017
Made with: HTML, CSS
Tags: css-grid, magazine, article, layout
61. Magazine
An introduction to the css grid using the recent masters win of Sergio Garcia. Features flex box and blend modes to pull off the print look original article here https://www.nytimes.com/2017/04/09/sports/golf/masters-sergio-garcia-fans.html?_r=0
Author: Andrew (andrewrock)
Links: Source Code / Demo
Created on: April 10, 2017
Made with: HTML, SCSS
Tags: grid, golf, magazine, css-grid, landing-page
62. Nested Grid Inside Flexbox Layout // CSS Grid
This pen has a nested CSS Grid inside of a Flexbox layout. Other goodies include scaling text and multiple layouts for different device widths.
Author: Brian Haferkamp (brianhaferkamp)
Links: Source Code / Demo
Created on: October 25, 2016
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-grid, flexbox, grid, magazine, background-image
63. Mobile-first Centered Layout // CSS Flexbox // Magazine Layout
A very loose attempt at an interesting center image layout using CSS Flexbox. The centered image is cut in half on mobile screens and brought together on desktop screens.
Author: Brian Haferkamp (brianhaferkamp)
Links: Source Code / Demo
Created on: December 18, 2017
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: mobile-first, image, flexbox, magazine
64. Two-Up Photo Spread W/Featured Image // Magazine Layout // CSS Grid
A responsive magazine layout using a two-up photo spread with a featured image taking up two spaces. Designed using multiple CSS Grids.
Author: Brian Haferkamp (brianhaferkamp)
Links: Source Code / Demo
Created on: November 1, 2017
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, css grid layout, layout, magazine
