Stuff & Nonsense product and website design

Compound, modular, and ratio-based grids

Layout Love

Thoughtfully chosen compound or modular grids can lead to any number of exciting designs. They bring cohesion to a composition and they help people understand the stories you’re telling.

I developed four sets of reusable layout components to make prototyping and site development work simpler. I call them Layout Love and I’m offering them for everyone to use. You can use Layout Love for any personal or commercial design project. Each set is just £2.99 and all five are £9.99 which could save you many hours or work.

Layout sets

Buy all five for £9.99

Set 1

4+5 compound grids

12 fully-responsive compound grid modules and 3 full-page layouts.

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

Buy 4+5 set for £2.99

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

Set 2

4+6 compound grids

12 fully-responsive compound grid modules and 3 full-page layouts.

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

Buy 4+5 set for £2.99

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

Set 3

3+4 compound grids

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.

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

Buy 4+5 set for £2.99

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

Set 4

Modular grids

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.

Buy 4+5 set for £2.99

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

Set 5

Ratio-based grids

15 three-column HTML/CSS Grid modules and 48 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.

Buy 4+5 set for £2.99

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

Who made this?

Andy Clarke 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.

Hire me. I’m available to work on new design projects.