▦ CSS Grid Template Generator

Visual grid layout builder with area editor

Grid Settings

Columns

Rows

Column Gappx

Row Gappx

Column Sizes

Row Sizes

Areas

Click an area, then click/drag on grid cells to assign. Use eraser to clear cells.

Generated CSS

Preview

Desktop - 1200px

▦ CSS Grid Template Generator

Visual grid layout builder with area editor & responsive preview

Grid Settings

Columns

Rows

Col Gap px

Row Gap px

Column Sizes

Row Sizes

Areas

Click cells to assign the selected area. Drag across cells to paint. Use eraser to clear.

Preview

Desktop - 1200px

Generated CSS

// ===== COPY ===== function copyCSS() { const code = document.getElementById('codeOutput').textContent; if (!code) { showToast('No CSS to copy'); return; } navigator.clipboard.writeText(code).then(() => { showToast('CSS copied to clipboard!'); }).catch(() => { // Fallback const ta = document.createElement('textarea'); ta.value = code; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); showToast('CSS copied to clipboard!'); }); } function showToast(msg) { const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 2000); } // ===== INIT ===== document.addEventListener('mouseup', () => { isDragging = false; }); document.addEventListener('touchend', () => { isDragging = false; }); // Prevent text selection while dragging document.addEventListener('selectstart', (e) => { if (isDragging) e.preventDefault(); }); init();

📐

Template Library

50+ ready-made grid layouts for common UI patterns

📱

Responsive Export

Export CSS for all breakpoints in one click

⚛️

React Components

Export grid layouts as ready-to-use React components

🔒Pro Features

Unlock Pro Features