Explore classic grid structures, switch presentation modes, and export the resulting layout code.
Last updated: April 2026 | By Workshelve Team
Holy Grail archetype
<div class="layout">
<header className=" p-4 border rounded shadow-sm flex items-center justify-center">Header</header>
<nav className=" p-4 border rounded shadow-sm flex items-center justify-center">Nav</nav>
<div className=" p-4 border rounded shadow-sm flex items-center justify-center">Main Content</div>
<aside className=" p-4 border rounded shadow-sm flex items-center justify-center">Sidebar</aside>
<footer className=" p-4 border rounded shadow-sm flex items-center justify-center">Footer</footer>
</div>.layout {
display: grid;
grid-template-areas: "header header header" "nav main side" "footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: 16px;
}Builds common page structures such as holy grail, masonry, magazine, dashboard, bento, and sidebar layouts with live preview and code export.
Pick a template, adjust the gap and padding, then toggle 3D if you want a better read on balance. Copy the markup for structure or the CSS for implementation.
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.
If you switch to Styled Components, the export format changes automatically. The preview is synthetic, so validate responsive breakpoints in your actual project before shipping.