Get started
Documentation

Tiny and expressive CSS library for responsive web development

Powerful yet simple grid system 

<div class="tg-row">
    <div class="tg-cell tg-span(4)">
        <div class="box"></div>
    </div>

    <div class="tg-cell tg-span(12)">
        <div class="box"></div>
    </div>

    <div class="tg-cell tg-span(8)">
        <div class="box"></div>
    </div>

    <div class="tg-cell tg-span(8)">
        <div class="box"></div>
    </div>

    <div class="tg-cell tg-span(12)">
        <div class="box"></div>
    </div>

    <div class="tg-cell tg-span(4)">
        <div class="box"></div>
    </div>
</div>

Responsivity baked in 

<div class="tg-row">
    <div class="tg-cell sm:tg-span(8) md:tg-mode(auto)">
        <div class="box"></div>
    </div>

    <div class="tg-cell sm:tg-span(8) md:tg-mode(auto)"> 
        <div class="box"></div>
    </div>

    <div class="tg-cell sm:tg-span(8) md:tg-mode(auto)">
        <div class="box"></div>
    </div>

    <div class="tg-cell sm:tg-span(8) md:tg-mode(auto)">
        <div class="box"></div>
    </div>

    <div class="tg-cell sm:tg-span(16) lg:tg-span(8)">
        <div class="box"></div>
    </div>

    <div class="tg-cell sm:tg-span(16) lg:tg-span(8)">
        <div class="box"></div>
    </div>
</div>

Easy-to-use modes 

<div class="tg-row sm:tg-mode(auto) md:tg-mode(thin)
    lg:tg-mode(stacked) md:tg-space-x(between)">
    <div class="tg-cell">
        <div class="box">Box</div>
    </div>

    <div class="tg-cell">
        <div class="box">Box</div>
    </div>

    <div class="tg-cell">
        <div class="box">This box has some content</div>
    </div>

    <div class="tg-cell">
        <div class="box">Box</div>
    </div>

    <div class="tg-cell">
        <div class="box">Box</div>
    </div>

    <div class="tg-cell">
        <div class="box">This one too</div>
    </div>
</div>
Box
Box
This box has some content
Box
Box
This one too

Gaps 

<div class="tg-row tg-y-gap(xl)">
    <div class="tg-cell">
        <div class="tg-row tg-x-gap(md)">
            <div class="tg-cell tg-span(5)">
                <div class="box"></div>
            </div>

            <div class="tg-cell tg-mode(fill)">
                <div class="box"></div>
            </div>

            <div class="tg-cell tg-span(3)">
                <div class="box"></div>
            </div>
        </div>
    </div>

    <div class="tg-cell">
        <div class="tg-row tg-mode(auto) tg-x-gap(xl)">
            <div class="tg-cell">
                <div class="box"></div>
            </div>

            <div class="tg-cell">
                <div class="box"></div>
            </div>
        </div>
    </div>
</div>