Layout Love compound and modular grids for your websites, by Andy Clarke

LAY OUT OFFBEAT COMPOUND & MODULAR GRIDS TO MAKE YOUR WEB PROJECTS MORE INTERESTING

When you use grids imaginatively, they do much, much more than align content. Grids bring cohesion to a composition. They help people understand the stories you’re telling by suggesting hierarchies. Grids inform people what to read first, then next, and how much attention to pay. A thoughtfully chosen compound or modular grid leads to a wealth of possibilities and any number of exciting designs.

Compound grids are two or more grids of any type on one page. Modules repeat horizontally and vertically to form a modular grid which are a fabulous choice for bringing order to complex content.

Using modern CSS Grid, I developed four sets of reusable layout components to make prototyping and site development work simpler. I call these Layout Love and rather than keeping them to myself, I’m offering them for everyone to use.

You can use Layout Love’s HTML and CSS for any personal or commercial design project. Each set is just £2.99 and all five together are £9.99 which could save you many hours or work.

Set 1

4+5 compound grids

Set includes 12 HTML/CSS Grid modules and 3 full-page layouts

Not 100% happy? You’ll get your money back. You can even keep the files.

4+5 layout set
4+5 compound grid layout
4+5 compound grid layout
4+5 compound grid layout
4+5 compound grid modules
4+5 compound grid modules
4+5 compound grid modules
4+5 compound grid modules

Twelve fully-responsive compound grid modules and three full-page layouts. Layout Love is intentionally un-opinionated and only contains the HTML and CSS Grid you need to implement this compound grid.

Set 2

4+6 compound grids

Set includes 12 HTML/CSS Grid modules and 3 full-page layouts

Not 100% happy? You’ll get your money back. You can even keep the files.

4+6 layout set
4+6 compound grid layout
4+6 compound grid layout
4+6 compound grid layout
4+6 compound grid modules
4+6 compound grid modules
4+6 compound grid modules
4+6 compound grid modules

Twelve fully-responsive compound grid modules and three full-page layouts. Layout Love is intentionally un-opinionated and only contains the HTML and CSS Grid you need to implement this compound grid.

Set 3

3+4 compound grids

Set includes 12 HTML/CSS Grid modules and 3 full-page layouts

Not 100% happy? You’ll get your money back. You can even keep the files.

3+4 layout set
3+4 compound grid layout
3+4 compound grid layout
3+4 compound grid layout
3+4 compound grid modules
3+4 compound grid modules
3+4 compound grid modules
3+4 compound grid modules

Twelve fully-responsive compound grid modules and three full-page layouts. Layout Love is intentionally un-opinionated and only contains the HTML and CSS Grid you need to implement this compound grid.

Set 4

Modular grids

Set includes 18 HTML/CSS Grid modular grid components based on a 4-column, 5-column, and 6-column grids

Not 100% happy? You’ll get your money back. You can even keep the files.

Modular grid layout set
4-column modular grid
4-column modular grid
4-column modular grid
4-column modular grid
4-column modular grid
4-column modular grid
5-column modular grid
5-column modular grid
5-column modular grid
5-column modular grid
5-column modular grid
5-column modular grid
6-column modular grid
6-column modular grid
6-column modular grid
6-column modular grid
6-column modular grid
6-column modular grid

Eighteen fully-responsive modular grid layouts. Layout Love is intentionally un-opinionated and only contains the HTML and CSS Grid you need to implement these modular grids.

Set 5

Ratio-based grids

Set includes fifteen three-column HTML/CSS Grid modules and forty-eight five-column modules based on three and five column auron (golden,) biauron, diagon, sixton, and doppelquadrat ratio grids.

Not 100% happy? You’ll get your money back. You can even keep the files.

Ratios-based layout set
3-column ratio-based grid layout
3-column ratio-based grid layout
3-column ratio-based grid layout
5-column ratio-based grid layout
5-column ratio-based grid layout
5-column ratio-based grid layout
5-column ratio-based grid layout
5-column ratio-based grid layout

Fifteen fully-responsive three-column HTML/CSS Grid modules and forty-eight five-column layout modules. Layout Love is intentionally un-opinionated and only contains the HTML and CSS Grid you need to implement these ratio-based grids.

Who made this?

Andy Clarke is a well-known website designer. Andy designed and developed Layout Love to encourage website designers and developers to make more inspiring designs for the web. Try the Layout Love compound grid generator.

 
Experience EXPERIENCE

Working with clients for over 25 years

Articles ARTICLES
Contact us OK, LET’S TALK

If you’re interested in working together

Press to call 01745 851848

go.bananas@stuffandnonsense.co.uk