Layout Love grid generator

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.

Buy Layout Love templates

Using modern CSS Grid, I developed five 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 four together are £9.99 which could save you many hours or work.

Buy all five sets for £9.99

1. Combine two grids

Choose a different number of columns for each grid. (eg: 3+4, 3+5, 4+5, 4+.)

2. Copy compound code

.your-class {
grid-template-columns: 1fr 1fr 1fr 1fr; }