Layouts that aren't just rows of boxes
Team pages, partner logos and photo galleries look better in a shape: a pyramid, a honeycomb, a diamond. Building those by hand means fiddling with offsets for every row. This tool works them out for you and gives you plain HTML + CSS Grid you can paste anywhere: no JavaScript, no framework, no dependencies.
How it works
- Pick a shape. Choose how many items you have and a shape: pyramid, inverted, diamond, hourglass, steps, honeycomb or zigzag. Or start from a template.
- Make it yours. Add your text, logos or photos, change row sizes, order and alignment right in the preview, and set a different set of rows for mobile.
- Copy the code. Named grid areas, a compact version with a handful of rules, or simple row wrappers. Turn off demo styles to get only the layout.
Good for
- Team and speaker pages
- Client and partner logo clouds
- Honeycomb photo galleries
- Skills, features and pricing badges
- Timelines and milestones
- Sponsor tiers
FAQ
Does the generated code need JavaScript?
No. The output is HTML and CSS only. CSS Grid with named areas or line numbers places every item.
Which browsers does it support?
All current browsers. CSS Grid works in every browser released since 2017.
How does the mobile layout work?
Turn on “Different rows on mobile” and type the rows you want below a breakpoint. The code adds a media query; in Named areas mode it only swaps the grid template.
Can I use it with WordPress, Webflow or a page builder?
Yes. Paste the HTML into an HTML/code block and the CSS into your custom CSS. Change the class name first so it matches your naming.
Are my images uploaded anywhere?
No. Images you add stay in your browser tab. The code only contains their file names.
Is it free?
Yes, and the code you copy is yours to use in any project.