Grid Generator

# -*- coding: utf8 -*-
# Screenshot: http://i.gyazo.com/7a6c6125cf35aca2f33cf29219c906f1.png
gutter = 20
grid_types = (2, 3, 4, 5, 8, 10, 12)

process_num = lambda n: str(round(n, 2) if n % 1 else int(n))

def gen_grid(cols):
    col_width = 100.0 / cols
    out = ''
    for i in range(1, cols):
        width = col_width * i
        out += """

.col-{{col}}-{{cols}} {
    width: {{width}}%;
}""".replace('{{col}}', str(i))\
    .replace('{{cols}}', str(cols))\
    .replace('{{width}}', process_num(width))
    return out

css = """.container {
    margin: auto;
}

.clearfix {
    clear: both;
}

.grid {
    overflow: hidden;
    padding: {{gutter}}px 0 0 {{gutter}}px;
}

[class*="col-"] {
    float: left;
    box-sizing: border-box;
    padding: 0 {{gutter}}px {{gutter}}px 0;
}""".replace('{{gutter}}', process_num(gutter))
html = """<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <title>CSS Grid Example</title>
        <link rel="stylesheet" href="grid.css">
        <style type="text/css">
            body {
                margin: 0;
                line-height: 1;
                font-family: Arial, sans-serif;
                font-size: small;
            }

            #page {
                width: 980px;
                text-align: center;
            }

            .data {
                background: #f3f3f3;
                padding: {{gutter}}px;
                border-radius: {{radius}}px;
            }
        </style>
    </head>
    <body>
        <div id="page" class="container">
            <div class="grid">
""".replace('{{gutter}}', process_num(gutter))\
   .replace('{{radius}}', process_num(gutter / 4))
for n in grid_types:
    css += gen_grid(n)
    for i in range(n):
        html += """                <div class="col-1-{0}">
                    <div class="data">{1}</div>
                </div>
""".format(n, i + 1)
    if n != grid_types[-1]:
        html += '                <br class="clearfix">\n'
html += """            </div>
        </div>
    </body>
</html>"""
with open('grid.css', 'w') as f:
    f.write(css)
with open('grid.htm', 'w') as f:
    f.write(html)