# Grids

---

<div class="grids">
    <div class="row">
          <div class="column col-6">
                <div class="grids bg-primary">
                    <div class="row">
                        <div class="column">
                            <div class="bg-secondary text-primary docs-block">grids 1</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="column text-secondary">
                            <div class="bg-secondary text-primary docs-block">col-6</div>
                        </div>
                    </div>
                </div>
          </div>
          <div class="column col-6">
                <div class="grids bg-primary">
                    <div class="row">
                        <div class="column">
                            <div class="bg-secondary text-primary docs-block">grids 2</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="column col-6">
                            <div class="bg-secondary text-primary docs-block">col-6</div>
                        </div>
                        <div class="column col-6">
                            <div class="bg-secondary text-primary docs-block">col-6</div>
                        </div>
                    </div>
                </div>
          </div>
    </div>
</div>

```html

<div class="grids">
    <div class="row">
          <div class="column col-6">
                <div class="grids bg-primary">
                    <div class="row">
                        <div class="column">
                            <div class="bg-secondary text-primary docs-block">grids 1</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="column text-secondary">
                            <div class="bg-secondary text-primary docs-block">col-6</div>
                        </div>
                    </div>
                </div>
          </div>
          <div class="column col-6">
                <div class="grids bg-primary">
                    <div class="row">
                        <div class="column">
                            <div class="bg-secondary text-primary docs-block">grids 2</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="column col-6">
                            <div class="bg-secondary text-primary docs-block">col-6</div>
                        </div>
                        <div class="column col-6">
                            <div class="bg-secondary text-primary docs-block">col-6</div>
                        </div>
                    </div>
                </div>
          </div>
    </div>
</div>
```

---

<div class="grids">
    <div class="row">
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
    </div>
</div>

<div class="grids">
    <div class="row">
          <div class="column col-2">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-2</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
    </div>
</div>

<div class="grids">
    <div class="row">
          <div class="column col-3">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-3</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
    </div>
</div>


<div class="grids">
    <div class="row">
          <div class="column col-4">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-4</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
    </div>
</div>

<div class="grids">
    <div class="row">
          <div class="column col-5">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-5</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
    </div>
</div>

<div class="grids">
    <div class="row">
          <div class="column col-6">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-6</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
    </div>
</div>

<div class="grids">
    <div class="row">
          <div class="column col-7">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-7</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
    </div>
</div>


<div class="grids">
    <div class="row">
          <div class="column col-8">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-8</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
    </div>
</div>

<div class="grids">
    <div class="row">
          <div class="column col-9">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-9</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
    </div>
</div>

<div class="grids">
    <div class="row">
          <div class="column col-10">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-10</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
    </div>
</div>


<div class="grids">
    <div class="row">
          <div class="column col-11">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-11</div>
            </div>
          </div>
          <div class="column">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-1</div>
            </div>
          </div>
    </div>
</div>


<div class="grids">
    <div class="row">
          <div class="column col-12">
            <div class="bg-primary text-secondary docs-block">
                <div class="bg-secondary text-primary docs-block">col-12 or column</div>
            </div>
          </div>
    </div>
</div>

```html
<div class="grids">
    <div class="row">
          <div class="column">
            <div class="bg-secondary text-primary"></div>
          </div>
          <div class="column">
            <div class="bg-secondary text-primary"></div>
          </div>
          <div class="column">
            <div class="bg-secondary text-primary"></div>
          </div>
          <div class="column">
            <div class="bg-secondary text-primary"></div>
          </div>
          <div class="column">
            <div class="bg-secondary text-primary"></div>
          </div>
          <div class="column">
            <div class="bg-secondary text-primary"></div>
          </div>
          <div class="column">
            <div class="bg-secondary text-primary"></div>
          </div>
          <div class="column">
            <div class="bg-secondary text-primary"></div>
          </div>
          <div class="column">
            <div class="bg-secondary text-primary"></div>
          </div>
          <div class="column">
            <div class="bg-secondary text-primary"></div>
          </div>
          <div class="column">
            <div class="bg-secondary text-primary"></div>
          </div>
          <div class="column">
            <div class="bg-secondary text-primary"></div>
          </div>
    </div>
</div>
```

---