Explore classic grid structures, switch presentation modes, and export the resulting layout code.
Last updated: April 2026 | By Workshelve Team
Holy Grail archetype
<div className="grid gap-[16px] p-[24px] grid-cols-[200px_minmax(0,1fr)_200px] grid-rows-[auto_1fr_auto] min-h-screen" style={{ gridTemplateAreas: '"header header header" "nav main side" "footer footer footer"' }}>
<header className="p-4 border rounded shadow-sm flex items-center justify-center [grid-area:header]">Header</header>
<nav className="p-4 border rounded shadow-sm flex items-center justify-center [grid-area:nav]">Nav</nav>
<main className="p-4 border rounded shadow-sm flex items-center justify-center [grid-area:main]">Main Content</main>
<aside className="p-4 border rounded shadow-sm flex items-center justify-center [grid-area:side]">Sidebar</aside>
<footer className="p-4 border rounded shadow-sm flex items-center justify-center [grid-area:footer]">Footer</footer>
</div>// Layout and child placement are expressed in the Tailwind classes above.Builds common page structures such as holy grail, masonry-style, magazine, dashboard, bento, and sidebar layouts with live preview and code export.
Pick a template, adjust the gap and padding, then choose an export target. Tailwind puts layout rules in utility classes, Vanilla includes CSS plus markup, and Styled Components includes the styled definition plus JSX.
Useful for landing pages, dashboards, editorial spreads, and app shells where layout structure needs to be tested quickly. The 3D mode is for composition only, not browser behavior.
Each export target includes the child placement rules needed to reproduce the selected archetype. The preview is synthetic, so validate responsive breakpoints in your actual project before shipping.
Related Tools
Build linear and radial gradients with custom color stops.
Remove, replace, and export image metadata.
Generate and inspect solid background-color declarations.
Generate gradient and image background-image CSS.
Generate uniform or side-specific CSS border declarations.
Generate uniform, corner, and elliptical border-radius CSS.