📐 CSS Subgrid Generator

intextEN
Home › Dev Tools › CSS Subgrid Generator

Visual config for CSS Grid sub-grid layouts, live preview + code generation

Zero Dependencies · Works Offline

🎛️ Parent Grid

3
16px
16px

🔗 Subgrid Config

4

🎭 Presets

🃏Cards
📝Form
📊Dashboard
🧭Navigation

👁️ Live Preview

💻 Generated Code

📖 Key Points

Syntax: grid-template-columns: subgrid

Effect: Child inherits parent tracks

Alignment: Nested items align to parent

Gap: Can inherit or override parent

Browser: Chrome 117+, Firefox 71+

What Can the CSS Subgrid Generator Do?

The CSS Subgrid Generator is a free online tool for visually configuring CSS Grid sub-grid layouts. Supports column/row subgrid toggles, track definitions, gap control, with live preview and CSS/HTML code generation. Perfect for frontend developers implementing nested grid alignment.

Core Features

Use Cases

Card List Alignment

When card internal elements (title, description, button) need cross-card alignment, subgrid lets all cards share the same track height.

Form Layout

Form labels and inputs need precise alignment. Subgrid lets nested form groups inherit parent grid column definitions.

Dashboard

Dashboard nested panels need to align to the same grid system. Subgrid ensures all panel internals align with the overall layout.

Background

CSS Subgrid is a core feature of CSS Grid Level 2, implemented in all major browsers in 2023. It solves the core pain point of Grid nesting: child grids can't align with parent tracks. Traditional workarounds required manual calculations or fixed sizes. Subgrid inherits parent definitions directly, resulting in cleaner code and easier maintenance. Key syntax: grid-template-columns: subgrid and grid-template-rows: subgrid.

FAQ

What is CSS Subgrid?▼
CSS Subgrid allows child grids to inherit parent grid track definitions, enabling nested elements to align with parent grid tracks — solving the traditional Grid nesting alignment problem.
Subgrid vs regular Grid?▼
Regular nested grids have independent tracks and can't align with parents. Subgrid lets children use parent tracks directly for cross-level alignment.
Browser support?▼
Chrome 117+, Firefox 71+, Safari 16+ natively. Graceful degradation to independent grid when unsupported.

🔗 Related Tools

Acronym GeneratorAdd WatermarkAudio Crossfade

CSS Subgrid Generator | No Signup, Client-Side · No Server Uploads

Feedback: dexshuang@google.com

';preview.innerHTML=html;updateCode()} function genCSS(){const c=parseInt(document.getElementById('cols').value),g=document.getElementById('gap').value+'px',rg=document.getElementById('row-gap').value+'px',sc=document.getElementById('sub-col').value,sr=document.getElementById('sub-row').value,colDef=getColDef();return`.parent {\n display: grid;\n grid-template-columns: ${colDef};\n gap: ${rg} ${g};\n}\n\n.child {\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: ${sc==='subgrid'?'subgrid':colDef};${sr==='subgrid'?'\n grid-template-rows: subgrid;':''}\n gap: ${g} ${rg};\n}`} function genHTML(){const items=parseInt(document.getElementById('child-items').value);let h='
\n
\n';for(let i=0;iItem ${i+1}
\n`;h+='
\n';return h} function updateCode(){document.getElementById('code-output').textContent=genCSS()+'\n\n'+genHTML()} function copyCode(){navigator.clipboard.writeText(genCSS()).then(()=>{const t=document.getElementById('copy-toast');t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2000)})} function copyHTML(){navigator.clipboard.writeText(genHTML()).then(()=>{const t=document.getElementById('copy-toast');t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2000)})} function loadPreset(n){const p={card:{cols:3,colType:'fr',gap:16,rgap:16,sc:'subgrid',sr:'subgrid',items:6},form:{cols:2,colType:'mixed',gap:12,rgap:12,sc:'subgrid',sr:'none',items:4},dashboard:{cols:4,colType:'fr',gap:12,rgap:12,sc:'subgrid',sr:'subgrid',items:8},nav:{cols:4,colType:'mixed',gap:8,rgap:8,sc:'subgrid',sr:'none',items:4}}[n];if(!p)return;document.getElementById('cols').value=p.cols;document.getElementById('cols-val').textContent=p.cols;document.getElementById('col-type').value=p.colType;document.getElementById('gap').value=p.gap;document.getElementById('gap-val').textContent=p.gap+'px';document.getElementById('row-gap').value=p.rgap;document.getElementById('rgap-val').textContent=p.rgap+'px';document.getElementById('sub-col').value=p.sc;document.getElementById('sub-row').value=p.sr;document.getElementById('child-items').value=p.items;document.getElementById('items-val').textContent=p.items;updateGrid();document.querySelectorAll('.preset-card').forEach(c=>c.classList.remove('active'));event.target.closest('.preset-card').classList.add('active')} window.addEventListener('load',updateGrid);