Grid Examples With Overlay

<!--
    Highlighted grid examples with overlay - 12 grid system
-->
<div class="fundamentals-grid-overlay-wrapper">
    <style>
        .fundamentals-grid-highlight .o-grid__row {
            margin-bottom: 2rem;
        }

        .fundamentals-grid-highlight [class*='o-grid__col'] {
            margin-bottom: 1rem;
        }

        .fundamentals-grid-highlight span {
            background-color: rgba(34, 136, 255, 0.4);
            padding: 1rem;
            display: block;
            height: 100%;
        }
    </style>

    <!--
    Highlighted grid examples - 12 grid system
-->
    <div class="fundamentals-grid-highlight">

        <!--
        Sizing
    -->

        <!--
        Grid full width
        Size of the col (value from 1 to the defined number of cols in $fw-grid-cols).
    -->
        <div class="o-grid">
            Sizing
            <div class="o-grid__row">
                <div class="o-grid__col:12">
                    <span>100%</span>
                </div>
            </div>
        </div>

        <!--
        Grid full width - 100%
        Size of the col starts at specified breakpoint (e.g. @ md)
    -->
        <div class="o-grid">
            <div class="o-grid__row">
                <div class="o-grid__col:12@md">
                    <span>100% @ md</span>
                </div>
            </div>
        </div>

        <!--
        Grid half - 50%
    -->
        <div class="o-grid">
            <div class="o-grid__row">
                <div class="o-grid__col:12 o-grid__col:6@md">
                    <span>100%, 50% @ md</span>
                </div>
                <div class="o-grid__col:12 o-grid__col:6@md">
                    <span>100%, 50% @ md</span>
                </div>
            </div>
        </div>

        <!--
        Grid 33%
    -->
        <div class="o-grid">
            <div class="o-grid__row">
                <div class="o-grid__col:12 o-grid__col:4@md">
                    <span>100%, 33% @ md</span>
                </div>
                <div class="o-grid__col:12 o-grid__col:4@md">
                    <span>100%, 33% @ md</span>
                </div>
                <div class="o-grid__col:12 o-grid__col:4@md">
                    <span>100%, 33% @ md</span>
                </div>
            </div>
        </div>

        <!--
        Grid 25% 50% 25%
    -->
        <div class="o-grid">
            <div class="o-grid__row">
                <div class="o-grid__col:12 o-grid__col:3@md">
                    <span>100%, 25% @ md</span>
                </div>
                <div class="o-grid__col:12 o-grid__col:6@md">
                    <span>100%, 50% @ md</span>
                </div>
                <div class="o-grid__col:12 o-grid__col:3@md">
                    <span>100%, 25% @ md</span>
                </div>
            </div>
        </div>

        <!--
       Nested
   -->
        <div class="o-grid">
            Nested in 66% and 33% grid container
            <div class="o-grid__row">
                <div class="o-grid__col:12 o-grid__col:8@md">
                    <span>
                    <div class="o-grid__row">
                        <div class="o-grid__col:12 o-grid__col:4@md">
                            <span>100%, 33% @ md</span>
                </div>
                <div class="o-grid__col:12 o-grid__col:4@md">
                    <span>100%, 33% @ md</span>
                </div>
                <div class="o-grid__col:12 o-grid__col:4@md">
                    <span>100%, 33% @ md</span>
                </div>
            </div>
            </span>
        </div>
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>
                    <div class="o-grid__row">
                        <div class="o-grid__col:12 o-grid__col:6@md">
                            <span>100%, 50% @ md</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:6@md">
            <span>100%, 50% @ md</span>
        </div>
    </div>
    </span>
</div>
</div>
</div>

<!--
        Alignment
    -->

<!--
        Grid vertical align default
        Cols are positioned by default.
    -->
<div class="o-grid">
    Alignment vertical
    <div class="o-grid__row">
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae.</span>

        </div>
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Culpa distinctio error exercitationem maiores nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
    </div>
</div>

<!--
        Grid vertical align top
        Cols are positioned at the vertical beginning of the row (align-items: flex-start;).
    -->
<div class="o-grid">
    <div class="o-grid__row o-grid__row--top@md">
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Culpa distinctio error exercitationem maiores nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
    </div>
</div>

<!--
        Grid vertical align middle
        Cols are positioned at the vertical center of the row (`align-items: center;`).
    -->
<div class="o-grid">
    <div class="o-grid__row o-grid__row--middle@md">
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Culpa distinctio error exercitationem maiores nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
    </div>
</div>

<!--
        Grid vertical align bottom
        Cols are positioned at the vertical end of the row (`align-items: flex-end;`).
    -->
<div class="o-grid">
    <div class="o-grid__row o-grid__row--bottom@md">
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa
                    distinctio error exercitationem maiores nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
    </div>
</div>

<!--
        Grid horizontal align start
        Default value. Cols are positioned at the beginning of the row (`justify-content: flex-start;`).
    -->
<div class="o-grid">
    Alignment horizontal
    <div class="o-grid__row o-grid__row--start@md">
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Culpa distinctio error exercitationem maiores nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
    </div>
</div>

<!--
        Grid horizontal align center
        Cols are positioned at the center of the row (`justify-content: center;`).
    -->
<div class="o-grid">
    <div class="o-grid__row o-grid__row--center@md">
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Culpa distinctio error exercitationem maiores nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
    </div>
</div>

<!--
        Grid horizontal align end
        Cols are positioned at the end of the row (`justify-content: flex-end;`).
    -->
<div class="o-grid">
    <div class="o-grid__row o-grid__row--end@md">
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Culpa distinctio error exercitationem maiores nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
    </div>
</div>

<!--
        Grid horizontal align
        Cols are positioned with space before, between, and after (justify-content: space-around;).
    -->
<div class="o-grid">
    Space around
    <div class="o-grid__row o-grid__row--around@md">
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Culpa distinctio error exercitationem maiores nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
    </div>
</div>

<!--
        Grid horizontal align
        Cols are positioned with space between (justify-content: space-between;).
    -->
<div class="o-grid">
    Space between
    <div class="o-grid__row o-grid__row--between@md">
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:4@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Culpa distinctio error exercitationem maiores nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
    </div>
</div>

<!--
       Order
       Col is positioned as first element in the row. Can be used with the @<breakpoint> notation.
   -->
<div class="o-grid">
    Order
    <div class="o-grid__row">
        <div class="o-grid__col:12 o-grid__col:4@md o-grid__col--last@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:4@md o-grid__col--first@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Culpa distinctio error exercitationem maiores nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
    </div>
</div>

<!--
       Offset
       Offset from the left side of the col (value from 1 to the defined number of cols in $fw-grid-cols).
   -->
<div class="o-grid">
    Offset
    <div class="o-grid__row">
        <div class="o-grid__col:12 o-grid__col:4@md o-grid__col--offset:2@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:4@md o-grid__col--offset:1@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Culpa distinctio error exercitationem maiores nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
    </div>
</div>

<!--
       Fluid width (meaning it’s 100% wide all the time).
       To disable the default fixed width, simply add the `.o-grid--fluid` modifier class.
   -->
<div class="o-grid o-grid--fluid">
    Fluid width
    <div class="o-grid__row">
        <div class="o-grid__col:12 o-grid__col:6@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
        <div class="o-grid__col:12 o-grid__col:6@md">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa distinctio error exercitationem maiores
                    nisi quae quibusdam quidem totam ullam vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Culpa distinctio error exercitationem maiores nisi quae quibusdam quidem totam ullam vitae.</span>
        </div>
    </div>
</div>

</div>

<style>
    .fundamentals-grid-overlay-wrapper {
        position: relative;
        height: 100%;
    }

    .fundamentals-grid-overlay-wrapper .fundamentals-grid-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .fundamentals-grid-overlay .o-grid__row {
        align-items: stretch;
        height: 5000px;
    }

    .fundamentals-grid-overlay span {
        background-color: rgba(204, 204, 204, 0.2);
        display: block;
        height: 100%;
    }
</style>

<!--
    Grid overlay example - 12 grid system
-->
<div class="fundamentals-grid-overlay">
    <div class="o-grid">
        <div class="o-grid__row">
            <div class="o-grid__col:1">
                <span></span>
            </div>
            <div class="o-grid__col:1">
                <span></span>
            </div>
            <div class="o-grid__col:1">
                <span></span>
            </div>
            <div class="o-grid__col:1">
                <span></span>
            </div>
            <div class="o-grid__col:1">
                <span></span>
            </div>
            <div class="o-grid__col:1">
                <span></span>
            </div>
            <div class="o-grid__col:1">
                <span></span>
            </div>
            <div class="o-grid__col:1">
                <span></span>
            </div>
            <div class="o-grid__col:1">
                <span></span>
            </div>
            <div class="o-grid__col:1">
                <span></span>
            </div>
            <div class="o-grid__col:1">
                <span></span>
            </div>
            <div class="o-grid__col:1">
                <span></span>
            </div>
        </div>
    </div>
</div>

</div>