{# Template : The Grid #}

{% extends 'chop/layouts.twig' %}

{% block content %}

<div class="pageWrap">

    {% include 'navigation/breadcrumbs.twig' %}

    {% include 'includes/elements/title_wrap.twig' %}

    <div class="contentPageWrap">

        <div class="contentWrap">

            <h3>Equal Grid Mixin</h3>
            <div class="content fourWide">

                {% for i in 1..8 %}

                    <div class="gridItem">
                        <div class="columnContent">
                            .gridItem
                        </div> <!-- .columnContent -->
                    </div> <!-- .grid -->

                {% endfor %}

            </div> <!-- .content.fourWide -->
            <div class="content threeWide">

                {% for i in 1..9 %}

                    <div class="gridItem">
                        <div class="columnContent">
                            .gridItem
                        </div> <!-- .columnContent -->
                    </div> <!-- .grid -->

                {% endfor %}

            </div> <!-- .content.fourWide -->
            <div class="content twoWide">

                {% for i in 1..2 %}

                    <div class="gridItem">
                        <div class="columnContent">
                            .gridItem
                        </div> <!-- .columnContent -->
                    </div> <!-- .grid -->

                {% endfor %}

            </div> <!-- .content.fourWide -->

            <h3>Column Grid Mixin Example</h3>

            <div class="colGroup">

                <div class="sideBar noBottomMargin">
                    <h6>This is sidebar content with a grid nested within</h6>
                    <div class="colGroup">
                        <div class="desktop_grid_12 tablet_grid_12 mobile_grid_24">
                            <div class="columnContent">
                                Nested Grid Item
                            </div> <!-- .columnContent -->
                        </div> <!-- .grid -->
                        <div class="desktop_grid_12 tablet_grid_12 mobile_grid_24">
                            <div class="columnContent">
                                Nested Grid Item
                            </div> <!-- .columnContent -->
                        </div> <!-- .grid -->
                    </div> <!-- .colGroup -->
                </div> <!-- .sideBar -->
                <div class="mainContent">
                    <div class="columnContent">
                        Grid Item
                    </div> <!-- .columnContent -->
                </div> <!-- .mainContent -->

            </div>

            <h3>Full Grid</h3>

            <div class="fullGridExample">

                {% for i in 1..12 %}
                    <div class="colGroup">

                        <div class="desktop_grid_{{ i }} tablet_grid_{{ i }} mobile_grid_{{ i }}">
                            <div class="columnContent">
                                <span class="desktop">
                                    .desktop_grid_{{ i }}
                                </span>
                                <span class="tablet">
                                    .tablet_grid_{{ i }}
                                </span>
                                <span class="mobile">
                                    .mobile_grid_{{ i }}
                                </span>
                            </div>
                        </div>

                        <div class="desktop_grid_{{ 24 - i }} tablet_grid_{{ 24 - i }} mobile_grid_{{ 24 - i }}">
                            <div class="columnContent">
                                <span class="desktop">
                                    .desktop_grid_{{ 24 - i }}
                                </span>
                                <span class="tablet">
                                    .tablet_grid_{{ 24 - i }}
                                </span>
                                <span class="mobile">
                                    .mobile_grid_{{ 24 - i }}
                                </span>
                            </div>
                        </div>

                    </div> <!-- .colGroup -->
                {% endfor %}

            </div> <!-- .fullGridExample -->

        </div> <!-- .contentWrap -->

    </div> <!-- .contentPageWrap -->

</div> <!-- .pageWrap -->

{% endblock %}
