toolbox/grid-generator.html at main · 100millionusd/toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free CSS Grid Generator — Visual Layout Builder</title>
  <meta name="description" content="Build CSS Grid layouts visually. Define columns, rows, gaps, and areas with live preview. Generate clean CSS code. Free online CSS Grid generator.">
  <link rel="canonical" href="https://www.quicktools.mom/grid-generator.html">
  <meta property="og:title" content="">
  <meta property="og:description" content="">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.quicktools.mom/grid-generator.html">
  <meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Grid Properties

        Columns
        Rows
        Column Gap (px)
        Row Gap (px)


        Column Sizes
        Row Sizes


        2 Col
        3 Col
        4 Col
        Sidebar
        Holy Grail
        Auto-fill


      👁️ Live Preview


        Generated CSS

        Copy


    Ad Space — 336×280
    FAQ
      What is CSS Grid?","acceptedAnswer":{"@type":"Answer","text":"CSS Grid is a two-dimensional layout system for the web. Unlike Flexbox (one-dimensional), Grid can handle both rows and columns simultaneously, making it ideal for complex page layouts, card grids, and dashboard designs."}},{"@type":"Question","name":"What does 1fr mean?","acceptedAnswer":{"@type":"Answer","text":"The `fr` unit represents a fraction of the available space. `1fr 2fr` creates two columns where the second is twice as wide as the first. It's similar to flex-grow but specific to CSS Grid."}}]}</script>
</head>
<body>
  <div class="page-wrapper">
    <header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
    <div class="ad-zone ad-zone-top">Ad Space — 728×90</div>
    <div class="tool-header">
      <div class="tool-badge">📐 Design</div>
      <h1>CSS Grid Generator</h1>
      <p>Build CSS Grid layouts visually. Define columns, rows, and gaps with live preview.</p>
    </div>
    <div class="tool-card">
      <h3 style="font-size:0.95rem;margin-bottom:1rem;">Grid Properties</h3>
      <div class="controls-row">
        <div class="control-group"><label>Columns</label><input type="number" id="cols" value="3" min="1" max="12" onchange="update()"></div>
        <div class="control-group"><label>Rows</label><input type="number" id="rows" value="3" min="1" max="12" onchange="update()"></div>
        <div class="control-group"><label>Column Gap (px)</label><input type="range" id="colGap" min="0" max="40" value="12" oninput="update()"></div>
        <div class="control-group"><label>Row Gap (px)</label><input type="range" id="rowGap" min="0" max="40" value="12" oninput="update()"></div>
      </div>
      <div class="controls-row mt-2">
        <div class="control-group"><label>Column Sizes</label><input type="text" id="colSizes" value="1fr 1fr 1fr" oninput="update()" class="mono" style="font-size:0.85rem;"></div>
        <div class="control-group"><label>Row Sizes</label><input type="text" id="rowSizes" value="auto auto auto" oninput="update()" class="mono" style="font-size:0.85rem;"></div>
      </div>
      <div style="display:flex;gap:0.4rem;flex-wrap:wrap;margin-top:0.75rem;">
        <button class="btn btn-secondary" onclick="preset('1fr 1fr','auto')" style="font-size:0.7rem;">2 Col</button>
        <button class="btn btn-secondary" onclick="preset('1fr 1fr 1fr','auto')" style="font-size:0.7rem;">3 Col</button>
        <button class="btn btn-secondary" onclick="preset('1fr 1fr 1fr 1fr','auto')" style="font-size:0.7rem;">4 Col</button>
        <button class="btn btn-secondary" onclick="preset('250px 1fr','auto')" style="font-size:0.7rem;">Sidebar</button>
        <button class="btn btn-secondary" onclick="preset('1fr','auto 1fr auto')" style="font-size:0.7rem;">Holy Grail</button>
        <button class="btn btn-secondary" onclick="preset('repeat(auto-fill, minmax(200px, 1fr))','auto')" style="font-size:0.7rem;">Auto-fill</button>
      </div>
    </div>
    <div class="tool-card">
      <h3 style="font-size:0.95rem;margin-bottom:1rem;">👁️ Live Preview</h3>
      <div id="preview" style="min-height:250px;padding:8px;background:var(--bg-secondary);border-radius:var(--radius);border:2px dashed var(--border);"></div>
    </div>
    <div class="tool-card">
      <div class="output-area" style="margin-top:0;">
        <span class="output-label">Generated CSS</span>
        <pre id="output" class="mono" style="font-size:0.85rem;line-height:1.8;"></pre>
        <button class="copy-btn" onclick="copyOut()">Copy</button>
      </div>
    </div>
    <div class="ad-zone">Ad Space — 336×280</div>
    <div class="faq-section"><h2>FAQ</h2>
      <div class="faq-item"><h3>What is CSS Grid?</h3><p>CSS Grid is a two-dimensional layout system for the web. Unlike Flexbox (one-dimensional), Grid can handle both rows and columns simultaneously, making it ideal for complex page layouts, card grids, and dashboard designs.</p></div>
      <div class="faq-item"><h3>What does 1fr mean?</h3><p>The `fr` unit represents a fraction of the available space. `1fr 2fr` creates two columns where the second is twice as wide as the first. It's similar to flex-grow but specific to CSS Grid.</p></div>
    </div>
        <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About CSS Grid Generator</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">CSS Grid Generator is a free, browser-based tool built for developers, content creators, and marketers. Build CSS Grid layouts visually. Define columns, rows, gaps, and areas with live preview. Generate clean CSS code. Free online CSS Grid generator. This tool processes everything locally using JavaScript — no data is uploaded to any server, no account is required, and there are no usage limits. Whether you’re working on a quick project or handling sensitive data, your privacy is fully protected. Bookmark this page and use it anytime — it works on desktop, tablet, and mobile devices.</p>
      <h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
      <ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
        <li><strong>Enter your data</strong> — Type, paste, or upload your input in the fields above.</li>
        <li><strong>Configure options</strong> — Adjust any settings or parameters to match your requirements.</li>
        <li><strong>Get instant results</strong> — Output updates automatically in real-time as you type.</li>
        <li><strong>Copy or download</strong> — Use the Copy button to grab results, or download if available.</li>
      </ol>
    </div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid">
      <a href="flexbox-generator.html"><span class="tool-icon">📐</span> Flexbox Generator</a>
      <a href="css-shadow.html"><span class="tool-icon">🌑</span> Box Shadow</a>
      <a href="border-radius.html"><span class="tool-icon">⬜</span> Border Radius</a>
      <a href="gradient-generator.html"><span class="tool-icon">🌈</span> Gradient Generator</a>
    </div></div>
    <div class="ad-zone ad-zone-bottom">Ad Space — 728×90</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a><a href="#">Privacy</a></div></footer>
  </div>
  <script>
    const colors=['#6366f1','#a78bfa','#ec4899','#f59e0b','#10b981','#3b82f6','#ef4444','#8b5cf6','#14b8a6','#f97316','#06b6d4','#e11d48'];
    function preset(c,r){document.getElementById('colSizes').value=c;document.getElementById('rowSizes').value=r;const cc=c.split(/\s+/).length;const rr=r.split(/\s+/).length;document.getElementById('cols').value=cc;document.getElementById('rows').value=rr;update();}
    function update(){
      const cols=+document.getElementById('cols').value,rows=+document.getElementById('rows').value;
      const colGap=document.getElementById('colGap').value,rowGap=document.getElementById('rowGap').value;
      const colSizes=document.getElementById('colSizes').value||'1fr '.repeat(cols).trim();
      const rowSizes=document.getElementById('rowSizes').value||'auto '.repeat(rows).trim();
      const el=document.getElementById('preview');
      el.style.display='grid';el.style.gridTemplateColumns=colSizes;el.style.gridTemplateRows=rowSizes;
      el.style.columnGap=colGap+'px';el.style.rowGap=rowGap+'px';
      let items='';const total=cols*rows;
      for(let i=1;i<=total;i++){items+=`<div style="background:${colors[(i-1)%colors.length]};color:white;padding:1.5rem;border-radius:8px;font-weight:600;font-size:0.85rem;display:flex;align-items:center;justify-content:center;min-height:60px;">${i}</div>`;}
      el.innerHTML=items;
      const css=`.container {\n  display: grid;\n  grid-template-columns: ${colSizes};\n  grid-template-rows: ${rowSizes};\n  column-gap: ${colGap}px;\n  row-gap: ${rowGap}px;\n}`;
      document.getElementById('output').textContent=css;
    }
    function copyOut(){navigator.clipboard.writeText(document.getElementById('output').textContent).then(()=>{const b=document.querySelector('.copy-btn');b.textContent='Copied!';b.classList.add('copied');setTimeout(()=>{b.textContent='Copy';b.classList.remove('copied')},2000)});}
    update();
  </script>
<script src="ads.js"></script>
</body>
</html>