CSS Layout Generator

Flex Container
direction
justify
align-items
flex-wrap
gap 12px
Layout Blocks
Spacing
Padding 16px
Border-R 6px
Min-height
Templates
Live Layout preview
layout-preview




Copied!
 \n';
var blob=new Blob([full],{type:'text/html'});
var a=document.createElement('a');
a.href=URL.createObjectURL(blob); a.download='layout.html'; a.click();
}/* ── PRESETS ── */
var PRESETS = {
'blog': {
type:'grid',
grid:{ cols:['1fr','300px'], rows:['auto','1fr','auto'], gap:16, auto:'none', minWidth:'200px' },
blocks:[
{id:1,tag:'header',label:'Header',color:'#5b8cff'},
{id:2,tag:'main',label:'Content',color:'#00c99a'},
{id:3,tag:'aside',label:'Sidebar',color:'#7c5cfc'},
{id:4,tag:'footer',label:'Footer',color:'#ee4a6b'}
]
},
'dashboard': {
type:'grid',
grid:{ cols:['240px','1fr','1fr'], rows:['60px','1fr','160px'], gap:12, auto:'none', minWidth:'200px' },
blocks:[
{id:1,tag:'header',label:'Top Bar',color:'#5b8cff'},
{id:2,tag:'nav',label:'Nav',color:'#7c5cfc'},
{id:3,tag:'main',label:'Main',color:'#00c99a'},
{id:4,tag:'div',label:'Widget',color:'#f0a035'},
{id:5,tag:'footer',label:'Footer',color:'#ee4a6b'}
]
},
'landing': {
type:'flex',
flex:{ dir:'column', justify:'flex-start', align:'stretch', wrap:'nowrap', gap:0 },
blocks:[
{id:1,tag:'header',label:'Navbar',color:'#5b8cff'},
{id:2,tag:'section',label:'Hero',color:'#7c5cfc'},
{id:3,tag:'section',label:'Features',color:'#00c99a'},
{id:4,tag:'section',label:'Pricing',color:'#f0a035'},
{id:5,tag:'footer',label:'Footer',color:'#ee4a6b'}
]
},
'portfolio': {
type:'mixed',
flex:{ dir:'row', justify:'flex-start', align:'stretch', wrap:'nowrap', gap:16 },
grid:{ cols:['1fr','1fr','1fr'], rows:['auto'], gap:16, auto:'auto-fit', minWidth:'200px' },
blocks:[
{id:1,tag:'div',label:'Project 1',color:'#5b8cff'},
{id:2,tag:'div',label:'Project 2',color:'#7c5cfc'},
{id:3,tag:'div',label:'Project 3',color:'#00c99a'},
{id:4,tag:'div',label:'Project 4',color:'#ee4a6b'},
{id:5,tag:'div',label:'Project 5',color:'#f0a035'},
{id:6,tag:'div',label:'Project 6',color:'#36d1dc'}
]
},
'holy-grail': {
type:'grid',
grid:{ cols:['200px','1fr','200px'], rows:['60px','1fr','60px'], gap:12, auto:'none', minWidth:'200px' },
blocks:[
{id:1,tag:'header',label:'Header',color:'#5b8cff'},
{id:2,tag:'nav',label:'Left Nav',color:'#7c5cfc'},
{id:3,tag:'main',label:'Main',color:'#00c99a'},
{id:4,tag:'aside',label:'Aside',color:'#f0a035'},
{id:5,tag:'footer',label:'Footer',color:'#ee4a6b'}
]
},
'cards': {
type:'grid',
grid:{ cols:['1fr','1fr','1fr'], rows:['auto'], gap:16, auto:'auto-fit', minWidth:'200px' },
blocks:[
{id:1,tag:'div',label:'Card 1',color:'#5b8cff'},
{id:2,tag:'div',label:'Card 2',color:'#7c5cfc'},
{id:3,tag:'div',label:'Card 3',color:'#00c99a'},
{id:4,tag:'div',label:'Card 4',color:'#ee4a6b'},
{id:5,tag:'div',label:'Card 5',color:'#f0a035'},
{id:6,tag:'div',label:'Card 6',color:'#36d1dc'}
]
}
};function loadPreset(name){
var p=PRESETS[name]; if(!p) return;
S.type=p.type;
if(p.flex) S.flex=Object.assign({},p.flex);
if(p.grid) S.grid={ cols:[].concat(p.grid.cols), rows:[].concat(p.grid.rows), gap:p.grid.gap, auto:p.grid.auto, minWidth:p.grid.minWidth };
S.blocks=p.blocks.map(function(b){ return Object.assign({},b); });
S.nextId=Math.max.apply(null,p.blocks.map(function(b){ return b.id; }))+1;
// update type buttons
qsa('.lg-type-btn').forEach(function(b){ b.classList.toggle('active',b.dataset.type===S.type); });
renderAll();
}/* ── RESET ── */
function resetAll(){
S.type='flex';
S.flex={ dir:'row', justify:'flex-start', align:'stretch', wrap:'nowrap', gap:12 };
S.grid={ cols:['1fr','1fr','1fr'], rows:['auto','auto'], gap:12, auto:'none', minWidth:'200px' };
S.blocks=[
{id:1,tag:'header',label:'Header',color:'#5b8cff'},
{id:2,tag:'div',label:'Sidebar',color:'#7c5cfc'},
{id:3,tag:'main',label:'Content',color:'#00c99a'},
{id:4,tag:'footer',label:'Footer',color:'#ee4a6b'}
]; S.nextId=5;
S.padding=16; S.radius=6; S.minHeight='80px';
qsa('.lg-type-btn').forEach(function(b){ b.classList.toggle('active',b.dataset.type==='flex'); });
renderAll();
}/* ── INIT ── */
document.addEventListener('DOMContentLoaded', function(){renderAll();// Layout type
qsa('.lg-type-btn').forEach(function(btn){
btn.addEventListener('click', function(){
qsa('.lg-type-btn').forEach(function(b){ b.classList.remove('active'); });
btn.classList.add('active');
S.type=btn.dataset.type;
renderAll();
});
});// Flex controls
['lg-flex-dir','lg-flex-justify','lg-flex-align','lg-flex-wrap'].forEach(function(id){
var key={'lg-flex-dir':'dir','lg-flex-justify':'justify','lg-flex-align':'align','lg-flex-wrap':'wrap'}[id];
$(id).addEventListener('change', function(){ S.flex[key]=this.value; renderPreview(); genCode(); });
});
$('lg-flex-gap').addEventListener('input', function(){
S.flex.gap=+this.value; $('lg-flex-gap-val').textContent=this.value+'px'; renderPreview(); genCode();
});// Grid col/row steppers
$('lg-gcol-minus').addEventListener('click', function(){
if(S.grid.cols.length<=1) return;
S.grid.cols.pop(); renderAll();
});
$('lg-gcol-plus').addEventListener('click', function(){
S.grid.cols.push('1fr'); renderAll();
});
$('lg-grow-minus').addEventListener('click', function(){
if(S.grid.rows.length<=1) return;
S.grid.rows.pop(); renderAll();
});
$('lg-grow-plus').addEventListener('click', function(){
S.grid.rows.push('auto'); renderAll();
});
$('lg-add-col').addEventListener('click', function(){
S.grid.cols.push('1fr'); renderAll();
});
$('lg-add-row').addEventListener('click', function(){
S.grid.rows.push('auto'); renderAll();
});
$('lg-grid-gap').addEventListener('input', function(){
S.grid.gap=+this.value; $('lg-grid-gap-val').textContent=this.value+'px'; renderPreview(); genCode();
});
$('lg-grid-auto').addEventListener('change', function(){
S.grid.auto=this.value;
$('lg-minmax-row').style.display=this.value!=='none'?'':'none';
renderPreview(); genCode();
});
$('lg-grid-minwidth').addEventListener('change', function(){
S.grid.minWidth=this.value; renderPreview(); genCode();
});// Spacing
$('lg-padding').addEventListener('input', function(){
S.padding=+this.value; $('lg-padding-val').textContent=this.value+'px'; renderPreview(); genCode();
});
$('lg-radius').addEventListener('input', function(){
S.radius=+this.value; $('lg-radius-val').textContent=this.value+'px'; renderPreview(); genCode();
});
$('lg-minheight').addEventListener('change', function(){
S.minHeight=this.value; renderPreview(); genCode();
});// Add block
$('lg-add-block').addEventListener('click', function(){
var ci=S.nextId%BCOLORS.length;
S.blocks.push({id:S.nextId, tag:'div', label:'Block '+S.nextId, color:BCOLORS[ci]});
S.nextId++; renderAll();
});// Preview mode
qsa('.lg-mode-btn').forEach(function(btn){
btn.addEventListener('click', function(){
qsa('.lg-mode-btn').forEach(function(b){ b.classList.remove('active'); });
btn.classList.add('active');
$('lg-frame').className='lg-frame '+btn.dataset.mode;
});
});// Code tabs
qsa('.lg-code-tab').forEach(function(btn){
btn.addEventListener('click', function(){ switchTab(btn.dataset.tab); });
});// Copy buttons
qsa('[data-copy]').forEach(function(btn){
btn.addEventListener('click', function(){ copyCode(btn.dataset.copy); });
});// Presets
qsa('.lg-preset-btn').forEach(function(btn){
btn.addEventListener('click', function(){ loadPreset(btn.dataset.preset); });
});// Reset
$('lg-reset-btn').addEventListener('click', resetAll);// Export
$('lg-export-btn').addEventListener('click', exportHTML);});})();

Generate responsive, semantic web layouts quickly without writing a single line of code. Perfect for beginners, designers, and developers who want clean, maintainable CSS. Start building your layout in seconds with live preview and instant code export.
Start Using the CSS Layout Generator
Use the interactive CSS Layout Generator above to create your custom layout. Choose your layout type, adjust rows and columns, set spacing, and watch your design update in real-time. Copy the HTML & CSS when ready to use in your project.
How the CSS Layout Generator Works
Our generator allows you to create modern web layouts visually. You simply select your layout type (Grid or Flexbox), define the structure, adjust spacing and alignment, and instantly see the result. No coding experience is required. The tool automatically generates semantic HTML and clean CSS for you.
CSS Concepts Behind the Tool
CSS Grid
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}
  • repeat(3, 1fr) creates three equal-width columns.
  • gap: 20px sets spacing between items.
Flexbox
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
  • justify-content: space-between evenly distributes items.
  • align-items: center vertically centers content.
Units & Responsiveness
  • fr for fractional space in Grid.
  • %, px, em for width, height, and spacing.
  • Media queries for responsive designs.
Semantic HTML
<header>, <main>, <aside>, <footer> ensure accessible and meaningful page structure.

How the CSS Layout Generator Works
Step-by-Step Guide: Creating Your First Layout
  1. Choose Layout Type Select Grid for complex 2D layouts or Flexbox for simpler 1D layouts.
  2. Define Rows & Columns Set the number of rows, columns, and spacing gaps.
  3. Customize Styles Adjust alignment, padding, and sizing for elements.
  4. Preview in Real-Time See your layout instantly in the live preview panel.
  5. Copy or Export Code Grab clean HTML and CSS ready for your website.
Pro Tip: Test layouts on different screen sizes to ensure responsiveness before exporting.
Examples & Use Cases
Two-Column Blog Layout
.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
  • Left column for content, right for sidebar.
Dashboard Layout
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 200px;
  gap: 15px;
}
  • Four-column layout with top header and main dashboard.
Gallery Layout
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
  • Automatically adjusts for any number of images with responsive columns.
Benefits of Using Our CSS Layout Generator
  • Beginner-Friendly: No coding experience required.
  • Live Preview: See changes in real-time.
  • Clean Code: Generates semantic HTML and maintainable CSS.
  • Responsive Ready: Works for desktop, tablet, and mobile layouts.
  • Fast & Free: Build layouts in seconds without software or plugins.
Related Tools You May Find Useful
Resources:
  • Developed by professional web developers for designers and beginners.
  • References authoritative sources: MDN Web Docs and W3C CSS Specifications.
  • Free-to-use tool, no signup required. Privacy-friendly and safe.
  • Encourages hands-on experimentation to learn modern CSS layout techniques.
Frequently Asked Questions





 Is this tool free to use?





Yes, completely free for personal and professional projects.






Absolutely! Copy the generated HTML and CSS instantly for any project.






Yes, preview layouts on mobile, tablet, and desktop screen sizes.






No, this tool is fully beginner-friendly and visual.






Use Grid for complex two-dimensional layouts, and Flexbox for simpler one-dimensional layouts.