Generate CSS grid-layouts FAST.

html, css, javascript, grid-layouts, flexbox, grid-layout, responsive
pip install griddy==0.3.0


griddy: Generate CSS grid layouts FAST

📐📏 Tired of manually splitting <div>'s? Try griddy.


Build from source

git clone
cd griddy
pip install .

From PyPI

pip install griddy


Defining a layout.json file

A layout .json file should follow the following syntax:

  • The json file contains one json object.
  • First level of the json object should have key root.
  • For (key, value) pairs in other levels, the keys should abide by the following conventions:
    • percentage: percentage of the children <div>'s height or width with respect to its parent's.
    • layout type: defines a column layout or a row layout (column layouts will be inside a flex container). If r is specified, the percentage is the relative height; if c is specified, the percentage is the relative width.
    • id (optional): used to prevent duplicate keys in the json object.
key = percentage + layout type + id
  • For keys in the same level, their layout types should be the same.
  • For keys in the same level, it is better that their percentage add up to 100.
  • If no more <div>s are to be splitted, set the value of the key to be null.

Sample layout.json file

            "10c": null,
            "20c": {
                "10r": null,
                "90r": null
            "70c": {
                "50r1": null,
                "50r2": {
                    "20c1": null,
                    "20c2": null,
                    "60c": null
        "30r": {
            "80c": null,
            "20c": null

Play with more examples in the examples directory.

Sample index.html output

Here <div> blocks are randomly colored for the sake of clarity with the --colored flag specified.

Plain borders surrounding blocks with --border flag specified.

The above picture shows how the json file syntax associates with actual layout generated.

Generate html and css

griddy <name of the layout file>

An index.html file and a styles.css file will be generated in the current working directory. You can simply plugin the generated grid <div> (top-level <div> of class root with style width: 100%; height:100%) anywhere in your existing code.

Command-line arguments

Arguments Type Explanation
--colored bool Whether to color the <div> blocks
--border bool <div> blocks comes with borders
--show bool Show generated grid in browser

For example,

griddy layout.json --border --show