Skip to main content

​
Grid System

APIDevice width when breakpoint overrides default
defaultSets default layout direction unless overridden by another breakpoint.
@xs-widthwidth < 35.5 em
@sm-width600 em ⇐ width < 35.5 em
@md-width35.5 em ⇐ width < 48 em
@lg-width48 em ⇐ width < 64 em
@xl-widthwidth >= 80 em
Twigkit uses a response 24 column grid system. The column widths are specified using a ratio of 24ths. For example at the attribute sm="1-3" to the layout:block tag to set the width to 1/3 of the container width on small screens. By default layout:blocks will be 100% width. Example 
<layout:grid styling="text-white">
    <layout:block xs="1"><layout:box styling="bg-raspberry-dark">1 (Default)</layout:box></layout:block>
    <layout:block xs="23-24"><layout:box styling="bg-raspberry">23-24</layout:box></layout:block>
    <layout:block xs="7-8"><layout:box styling="bg-raspberry-light">7-8</layout:box></layout:block>
    <layout:block xs="5-6"><layout:box styling="bg-strawberry-light">5-6</layout:box></layout:block>
    <layout:block xs="4-5"><layout:box styling="bg-strawberry">4-5</layout:box></layout:block>
    <layout:block xs="3-4"><layout:box styling="bg-strawberry-dark">3-4</layout:box></layout:block>
    <layout:block xs="2-3"><layout:box styling="bg-carrot">2-3</layout:box></layout:block>
    <layout:block xs="1-2"><layout:box styling="bg-carrot-light">1-2</layout:box></layout:block>
</layout:grid>

​
Grid Breakpoints

Widths can be specified for each of the xs, sm, md, lg, and xl breakpoints individually. lg Example md Example sm Example 
<layout:grid styling="text-white">
    <layout:block xs="1">
        <layout:box styling="bg-sunflower">Always full width</layout:box>
    </layout:block>
    <layout:grid>
        <layout:block xl="1-3" md="1-2">
            <layout:box styling="bg-pumpkin-light">xl=1-3, md=1-2</layout:box>
        </layout:block>
        <layout:block xl="1-3" md="1-2">
            <layout:box styling="bg-pumpkin">xl=1-3, md=1-2</layout:box>
        </layout:block>
        <layout:block xl="1-3" md="1">
            <layout:box styling="bg-pumpkin-dark">xl=1-3, md=1</layout:box>
        </layout:block>
    </layout:grid>
</layout:grid>

​
Grid Offsets

An offset attribute can be used to push the layout:block to the right, leaving an empty space Example 
<layout:grid styling="text-white">
    <layout:block xs="1">
        <layout:box styling="bg-mint">Always full width</layout:box>
    </layout:block>
    <layout:grid>
        <layout:block xl="1-3" md="1-2">
            <layout:box styling="bg-mint-light">xl=1-3, md=1-2</layout:box>
        </layout:block>
        <layout:block xl="1-3" md="1-2" xl-offset="1-3">
            <layout:box styling="bg-mint">xl=1-3 xl-offset=1-3, md=1-2</layout:box>
        </layout:block>
    </layout:grid>
    <layout:grid>
        <layout:block xs="1-2" xs-offset="1-4" sm-offset="1-2" md-offset="0">
            <layout:box styling="bg-aqua">No offset md and above</layout:box>
        </layout:block>
    </layout:grid>
    <layout:grid>
        <layout:block xs="1-2" sm-offset="1-4">
            <layout:box styling="bg-aqua-dark">Offset at sm and above</layout:box>
        </layout:block>
    </layout:grid>
</layout:grid>

​
Nested

Standard Button Example 
<layout:grid styling="text-white">
    <layout:block xs="1-1" sm="1-2" md="1-4">
        <layout:box styling="bg-aqua-light">
            .tk-rgrid-u-1 <br>
            .tk-rgrid-u-sm-1-2 <br>
            .tk-rgrid-u-md-1-4 <br>
        </layout:box>
    </layout:block>
    <layout:block xs="1-1" sm="1-2" md="1-4">
        <layout:box styling="bg-sky-light">
            .tk-rgrid-u-1 <br>
            .tk-rgrid-u-sm-1-2 <br>
            .tk-rgrid-u-md-1-4 <br>
        </layout:box>
    </layout:block>
    <layout:block xs="1-1" sm="1-2" md="1-4">
        <layout:box styling="bg-sky">
            .tk-rgrid-u-1 <br>
            .tk-rgrid-u-sm-1-2 <br>
            .tk-rgrid-u-md-1-4 <br>
        </layout:box>
    </layout:block>
    <layout:block xs="1-1" sm="1-2" md="1-4">
        <layout:box styling="bg-sky-dark">
            .tk-rgrid-u-1 <br>
            .tk-rgrid-u-sm-1-2 <br>
            .tk-rgrid-u-md-1-4 <br>
        </layout:box>
    </layout:block>
</layout:grid>

​
Image

Standard Button Example 
<layout:grid>
    <layout:block xs="1-1" sm="1-2" md="1-4">
        <layout:box styling="bg-paper">
            <p>
                .tk-rgrid-u-1 <br>
                .tk-rgrid-u-sm-1-2 <br>
                .tk-rgrid-u-md-1-4 <br>
            </p>
        </layout:box>
    </layout:block>
    <layout:block xs="1-1" sm="1-2" md="1-4">
        <layout:box styling="bg-paper-dark">
            <p>
                .tk-rgrid-u-1 <br>
                .tk-rgrid-u-sm-1-2 <br>
                .tk-rgrid-u-md-1-4 <br>
            </p>
        </layout:box>
    </layout:block>
    <layout:block xs="1-1" sm="1-2" md="2-4">
        <layout:box styling="bg-paper">
            <p>
                .tk-rgrid-u-sm-1-2 <br>
                .tk-rgrid-u-md-2-4 <br>
            </p>
            <layout:grid>
                <layout:block sm="1-1" md="1-2">
                    <layout:box styling="bg-paper-light">
                        <p>
                            .tk-rgrid-u-1 <br>
                            .tk-rgrid-u-md-1-2 <br>
                        </p>
                    </layout:box>
                </layout:block>
                <layout:block sm="1-1" md="1-2">
                    <layout:box styling="bg-paper-dark">
                        <p>
                            .tk-rgrid-u-1 <br>
                            .tk-rgrid-u-md-1-2 <br>
                        </p>
                    </layout:box>
                </layout:block>
            </layout:grid>
        </layout:box>
    </layout:block>
</layout:grid>

​
Justify Content

Example 
<layout:grid>
    <layout:block styling="center-content bg-raspberry text-white" md="1-2">
        <p>Long content</p>
        <br><br><br><br><br><br><br>
    </layout:block>
    <layout:block md="1-2">
        <div styling="stretch-content">
            <layout:block styling="center-content bg-strawberry text-white" md="1-2">item 1</layout:block>
            <layout:block styling="center-content bg-carrot text-white" md="1-2">item2</layout:block>
            <layout:block styling="center-content bg-pumpkin text-white full-width">item 3</layout:block>
        </div>
    </layout:block>
</layout:grid>

​
Hide

You can hide the layout by using hide or show at your desire size point styling="hide-xs" xl Example md Example xs Example 
<layout:grid>
    <layout:block md="1-5" styling="hide-xs bg-concrete-light">
        <layout:box>hide @xs-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="hide-sm bg-concrete">
        <layout:box>hide @sm-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="hide-md bg-concrete-dark">
        <layout:box>hide @md-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="hide-lg bg-asphalt-light">
        <layout:box>hide @lg-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="hide-xl bg-asphalt">
        <layout:box>hide @xl-width</layout:box>
    </layout:block>
</layout:grid>

<layout:grid>
    <layout:block md="1-5" styling="show-xs bg-pink-light">
        <layout:box>show @xs-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="show-sm bg-pink">
        <layout:box>show @sm-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="show-md bg-pink-dark">
        <layout:box>show @md-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="show-lg bg-lavender">
        <layout:box>show @lg-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="show-xl bg-lavender-dark">
        <layout:box>show @xl-width</layout:box>
    </layout:block>
</layout:grid>

​
Alignments

Default (Stretch) Example Align All Items Top (.tk-rgrid-align-top) Example Align All Items Bottom (.tk-rgrid-align-bottom) Example Align All Items Middle (.tk-rgrid-align-middle) Example Stretch All Items (.tk-rgrid-align-stretch) Example Item Alignment Overrides Example

​
Justify Items

Default, Align items to the start (.tk-rgrid-justify-start) Example Align items to the end of the container (.tk-rgrid-justify-end) Example Center items (.tk-rgrid-justify-center) Example Even spacing around items (.tk-rgrid-justify-around) Example Even spacing between items (.tk-rgrid-justify-between) Example Combination Example

​
Container Direction

Row - Default (.tk-rgrid-direction-row) Example Row Reverse (.tk-rgrid-direction-row-reverse) Example Column (.tk-rgrid-direction-col) Example Column Reverse (.tk-rgrid-direction-col-reverse) Example

​
Offsets

Example