Grid

<div class="fs-row">
    <div class="fs-cell">
        <h1 id="grid-demo">Grid Demo</h1>

        <h4>Asymmetrical</h4>

        <!-- START: FIRSTDEMO -->

        <style>
            .button.bookmarklet {
                clear: both;
            }

            .example {
                margin: 20px 0;
            }

            .example .fs-row {
                background: #CFD8DC;
                border-radius: 2px;
            }

            .example [class*="fs-cell"] {
                background: #455a64;
                color: #fff;
                border-radius: 2px;
                text-align: center;
            }

            .example .tall {
                height: 100px;
            }

            .example .highlight {
                background: #00bcd4;
            }

            .example .nested {
                background: none;
                margin-top: 0;
                margin-bottom: 0;
            }

            .example .nested .fs-row {
                padding-block-start: 0;
            }

            .example [class*="label"] {
                display: block;
                padding-block: 15px;
            }

            /*.example .label,
.example .label_small,
.example .label_medium,
.example .label_large { background: #455a64; }*/
            .example .label_small,
            .example .label_medium,
            .example .label_large {
                display: none;
            }

            @media screen and (min-width: 0px) and (max-width: 739px) {
                .example .label_small {
                    display: block;
                }
            }

            @media screen and (min-width: 740px) and (max-width: 979px) {
                .example .label_medium {
                    display: block;
                }
            }

            @media screen and (min-width: 980px) {
                .example .label_large {
                    display: block;
                }
            }
        </style>

        <div class="example">
            <div class="fs-row">
                <div class="fs-cell fs-sm-1 fs-md-2 fs-lg-4">
                    <span class="label_small">fs-sm-1</span>
                    <span class="label_medium">fs-md-2</span>
                    <span class="label_large">fs-lg-4</span>
                </div>
                <div class="fs-cell fs-sm-2 fs-md-4 fs-lg-8">
                    <span class="label_small">fs-sm-2</span>
                    <span class="label_medium">fs-md-4</span>
                    <span class="label_large">fs-lg-8</span>
                </div>
            </div>
        </div>

        <!-- END: FIRSTDEMO -->

        <h4>Symmetrical</h4>
        <div class="example">
            <div class="fs-row">
                <div class="fs-cell fs-sm-3 fs-md-3 fs-lg-6">
                    <span class="label_small">fs-sm-3</span>
                    <span class="label_medium">fs-md-3</span>
                    <span class="label_large">fs-lg-6</span>
                </div>
                <div class="fs-cell fs-sm-3 fs-md-3 fs-lg-6">
                    <span class="label_small">fs-sm-3</span>
                    <span class="label_medium">fs-md-3</span>
                    <span class="label_large">fs-lg-6</span>
                </div>
            </div>
        </div>

        <h4>3 Column</h4>
        <div class="example">
            <div class="fs-row">
                <div class="fs-cell fs-all-third">
                    <span class="label">fs-all-third</span>
                </div>
                <div class="fs-cell fs-all-third">
                    <span class="label">fs-all-third</span>
                </div>
                <div class="fs-cell fs-all-third">
                    <span class="label">fs-all-third</span>
                </div>
            </div>
        </div>

        <h4>Nested</h4>
        <div class="example">
            <div class="fs-row">
                <div class="fs-cell fs-md-4 fs-lg-8 nested">
                    <div class="fs-row">
                        <div class="fs-cell fs-md-half fs-lg-half">
                            <span class="label_small">fs-sm-full</span>
                            <span class="label_medium">fs-md-half</span>
                            <span class="label_large">fs-lg-half</span>
                        </div>
                        <div class="fs-cell fs-md-half fs-lg-half">
                            <span class="label_small">fs-sm-full</span>
                            <span class="label_medium">fs-md-half</span>
                            <span class="label_large">fs-lg-half</span>
                        </div>
                    </div>
                </div>
                <div class="fs-cell fs-md-2 fs-lg-4">
                    <span class="label_small">fs-sm-full</span>
                    <span class="label_medium">fs-md-2</span>
                    <span class="label_large">fs-lg-4</span>
                </div>
            </div>
        </div>

        <h4>Push</h4>
        <div class="example">
            <div class="fs-row">
                <div class="fs-cell fs-sm-2 fs-sm-push-1 fs-md-3 fs-md-push-3 fs-lg-8 fs-lg-push-4">
                    <span class="label_small">fs-sm-2 fs-sm-push-1</span>
                    <span class="label_medium">fs-md-3 fs-md-push-3</span>
                    <span class="label_large">fs-lg-8 fs-lg-push-4</span>
                </div>
            </div>
        </div>

        <h4>Contained</h4>
        <div class="example">
            <div class="fs-row">
                <div class="fs-cell-contained fs-all-half">
                    <span class="label">fs-cell-contained</span>
                </div>
                <div class="fs-cell-contained fs-all-half">
                    <span class="label">fs-cell-contained</span>
                </div>
            </div>
        </div>

        <h4>Padded</h4>
        <div class="example">
            <div class="fs-row">
                <div class="fs-cell-padded fs-all-half">
                    <span class="label">fs-cell-padded</span>
                </div>
                <div class="fs-cell-padded fs-all-half">
                    <span class="label">fs-cell-padded</span>
                </div>
            </div>
        </div>

        <h4>Cell Align Start</h4>
        <div class="example">
            <div class="fs-row">
                <div class="fs-cell fs-all-third tall">
                    <span class="label">1</span>
                </div>
                <div class="fs-cell fs-all-align-start fs-all-third">
                    <span class="label">2</span>
                </div>
                <div class="fs-cell fs-all-third third">
                    <span class="label">3</span>
                </div>
            </div>
        </div>

        <h4>Cell Align Center</h4>
        <div class="example">
            <div class="fs-row">
                <div class="fs-cell fs-all-third tall">
                    <span class="label">1</span>
                </div>
                <div class="fs-cell fs-all-align-center fs-all-third">
                    <span class="label">2</span>
                </div>
                <div class="fs-cell fs-all-third tall">
                    <span class="label">3</span>
                </div>
            </div>
        </div>

        <h4>Cell Align End</h4>
        <div class="example">
            <div class="fs-row">
                <div class="fs-cell fs-all-third tall">
                    <span class="label">1</span>
                </div>
                <div class="fs-cell fs-all-align-end fs-all-third">
                    <span class="label">2</span>
                </div>
                <div class="fs-cell fs-all-third tall">
                    <span class="label">3</span>
                </div>
            </div>
        </div>

        <h4>Cell Justify Start</h4>
        <div class="example">
            <div class="fs-row">
                <div class="fs-cell fs-all-third fs-all-justify-start">
                    <span class="label">1</span>
                </div>
            </div>
        </div>

        <h4>Cell Justify Center</h4>
        <div class="example">
            <div class="fs-row">
                <div class="fs-cell fs-all-third fs-all-justify-center">
                    <span class="label">1</span>
                </div>
            </div>
        </div>

        <h4>Cell Justify End</h4>
        <div class="example">
            <div class="fs-row">
                <div class="fs-cell fs-all-third fs-all-justify-end">
                    <span class="label">1</span>
                </div>
            </div>
        </div>

        <h4>Cell Order First</h4>
        <div class="example">
            <div class="fs-row">
                <div class="fs-cell fs-all-third">
                    <span class="label">1</span>
                </div>
                <div class="fs-cell fs-all-third">
                    <span class="label">2</span>
                </div>
                <div class="fs-cell fs-all-third fs-first highlight">
                    <span class="label">3</span>
                </div>
            </div>
        </div>

        <h4>Cell Order Last</h4>
        <div class="example">
            <div class="fs-row">
                <div class="fs-cell fs-all-third fs-last highlight">
                    <span class="label">1</span>
                </div>
                <div class="fs-cell fs-all-third">
                    <span class="label">2</span>
                </div>
                <div class="fs-cell fs-all-third">
                    <span class="label">3</span>
                </div>
            </div>
        </div>

        <h4>Cell Width Auto</h4>
        <div class="example">
            <div class="fs-row fs-reverse">
                <div class="fs-cell fs-all-auto">
                    <span class="label">1</span>
                </div>
                <div class="fs-cell fs-all-auto">
                    <span class="label">2</span>
                </div>
                <div class="fs-cell fs-all-auto">
                    <span class="label">3</span>
                </div>
                <div class="fs-cell fs-all-auto">
                    <span class="label">4</span>
                </div>
            </div>
        </div>

        <h4>Row Justify Around</h4>
        <div class="example">
            <div class="fs-row fs-all-justify-around">
                <div class="fs-cell fs-all-third">
                    <span class="label">1</span>
                </div>
                <div class="fs-cell fs-all-third">
                    <span class="label">2</span>
                </div>
            </div>
        </div>

        <h4>Row Justify Between</h4>
        <div class="example">
            <div class="fs-row fs-all-justify-between">
                <div class="fs-cell fs-all-third">
                    <span class="label">1</span>
                </div>
                <div class="fs-cell fs-all-third">
                    <span class="label">2</span>
                </div>
            </div>
        </div>

        <h4>Row Justify Start</h4>
        <div class="example">
            <div class="fs-row fs-all-justify-start">
                <div class="fs-cell fs-all-third">
                    <span class="label">1</span>
                </div>
                <div class="fs-cell fs-all-third">
                    <span class="label">2</span>
                </div>
            </div>
        </div>

        <h4>Row Justify Center</h4>
        <div class="example">
            <div class="fs-row fs-all-justify-center">
                <div class="fs-cell fs-all-third">
                    <span class="label">1</span>
                </div>
                <div class="fs-cell fs-all-third">
                    <span class="label">2</span>
                </div>
            </div>
        </div>

        <h4>Row Justify End</h4>
        <div class="example">
            <div class="fs-row fs-all-justify-end">
                <div class="fs-cell fs-all-third">
                    <span class="label">1</span>
                </div>
                <div class="fs-cell fs-all-third">
                    <span class="label">2</span>
                </div>
            </div>
        </div>

        <h4>Row Align Start</h4>
        <div class="example">
            <div class="fs-row fs-all-align-start">
                <div class="fs-cell fs-all-half tall">
                    <span class="label">1</span>
                </div>
                <div class="fs-cell fs-all-half">
                    <span class="label">2</span>
                </div>
            </div>
        </div>

        <h4>Row Align Center</h4>
        <div class="example">
            <div class="fs-row fs-all-align-center">
                <div class="fs-cell fs-all-half tall">
                    <span class="label">1</span>
                </div>
                <div class="fs-cell fs-all-half">
                    <span class="label">2</span>
                </div>
            </div>
        </div>

        <h4>Row Align End</h4>
        <div class="example">
            <div class="fs-row fs-all-align-end">
                <div class="fs-cell fs-all-half tall">
                    <span class="label">1</span>
                </div>
                <div class="fs-cell fs-all-half">
                    <span class="label">2</span>
                </div>
            </div>
        </div>

        <h4>Row Order Reverse</h4>
        <div class="example">
            <div class="fs-row fs-reverse">
                <div class="fs-cell fs-all-third">
                    <span class="label">1</span>
                </div>
                <div class="fs-cell fs-all-third">
                    <span class="label">2</span>
                </div>
                <div class="fs-cell fs-all-third">
                    <span class="label">3</span>
                </div>
            </div>
        </div>

        <div class="fs-row">
            <div class="fs-cell fs-all-full">
                <div class="fs-row">
                    <div class="fs-cell fs-all-third fs-contained"><span class="label">1</span></div>
                    <div class="fs-cell fs-all-third fs-contained"><span class="label">2</span></div>
                    <div class="fs-cell fs-all-third fs-contained"><span class="label">3</span></div>
                </div>
            </div>
        </div>
        <!-- END: DEMO -->
        <div class="footer">
            <div class="copyright">
                <div>© 2021 <a href="https://formstone.it/">Formstone</a></div>
            </div>
            <div class="footer_links">
                <!-- JSFOOTER -->
            </div>
        </div>
    </div>
</div>