<div id="#guideline-grid">
    <!-- Explain -->
    <div class="grid-system">
        <div class="grid-row grid-100 no-bottom-margin">
            <div class="row-wrapper">
                <h2 class="render-title">Grid</h2>
            </div>
        </div>

        <div class="grid-row grid-first-row grid-30">
            <div class="row-wrapper">
                <p>The default grid system provided is a 100%-wide, split into 5% intervals. Starts from 5% and is increased by 5% till 95%.</p>
                <p>5 %, 10 %, 15 %, 20 %, 25 %, 30 %, 35 %, 40 %, 45 %, 50 %, 55 %, 60 %, 65 %, 70 %, 75 %, 80 %, 85 %, 90 %, 95%</p>
                <p>You can combine all columns as your own</p>
            </div>
        </div>
        <div class="grid-row grid-30">
                    <div class="row-wrapper row-offset">
                        <p>
                        <div class="grid-system show-grid" style="font-size:9px; text-align:center">
                            <div class="grid-row grid-first-row grid-25">
                                <div class="row-wrapper">
                                    25%
                                </div>
                            </div>
                            <div class="grid-row grid-25">
                                <div class="row-wrapper">
                                    25%
                                </div>
                            </div>
                            <div class="grid-row grid-25">
                                <div class="row-wrapper">
                                    25%
                                </div>
                            </div>
                            <div class="grid-row grid-25">
                                <div class="row-wrapper">
                                    25%
                                </div>
                            </div>
                            <div class="grid-row grid-first-row grid-50">
                                <div class="row-wrapper">
                                    50%
                                </div>
                            </div>
                            <div class="grid-row grid-50">
                                <div class="row-wrapper">
                                    50%
                                </div>
                            </div>
                            <div class="grid-row grid-first-row grid-25">
                                <div class="row-wrapper">
                                    25%
                                </div>
                            </div>
                            <div class="grid-row grid-75">
                                <div class="row-wrapper">
                                    75%
                                </div>
                            </div>
                            <div class="grid-row grid-first-row grid-25 no-bottom-margin">
                                <div class="row-wrapper">
                                    25%
                                </div>
                            </div>
                            <div class="grid-row grid-25 no-bottom-margin">
                                <div class="row-wrapper">
                                    25%
                                </div>
                            </div>
                            <div class="grid-row grid-50 no-bottom-margin">
                                <div class="row-wrapper">
                                    50%
                                </div>
                            </div>
                            
                            <div class="clear"></div>
                        </div>
                        </p>
                </div>
        </div>
        <div class="grid-row grid-40">
            <div class="row-wrapper">
<pre style="color:#3b3b3b"><span style="color:#7a7a7a">&lt;<span style="color:#016cff">div</span> <span style="color:#963dff">class</span>=<span style="color:#666">"grid-system"</span>></span>
    <span style="color:#7a7a7a">&lt;<span style="color:#016cff">div</span> <span style="color:#963dff">class</span>=<span style="color:#666">"grid-row grid-first-row grid-70"</span>></span>
        <span style="color:#7a7a7a">&lt;<span style="color:#016cff">div</span> <span style="color:#963dff">class</span>=<span style="color:#666">"row-wrapper"</span>></span>
            ...
        <span style="color:#7a7a7a">&lt;/<span style="color:#016cff">div</span>></span>
    <span style="color:#7a7a7a">&lt;/<span style="color:#016cff">div</span>></span>
    <span style="color:#7a7a7a">&lt;<span style="color:#016cff">div</span> <span style="color:#963dff">class</span>=<span style="color:#666">"grid-row grid-30"</span>></span>
        <span style="color:#7a7a7a">&lt;<span style="color:#016cff">div</span> <span style="color:#963dff">class</span>=<span style="color:#666">"row-wrapper"</span>></span>
            ...
        <span style="color:#7a7a7a">&lt;/<span style="color:#016cff">div</span>></span>
    <span style="color:#7a7a7a">&lt;/<span style="color:#016cff">div</span>></span>
    <span style="color:#7a7a7a">&lt;<span style="color:#016cff">div</span> <span style="color:#963dff">class</span>=<span style="color:#666">"clear"</span>>&lt;/<span style="color:#016cff">div</span>></span>
<span style="color:#7a7a7a">&lt;/<span style="color:#016cff">div</span>></span>
</pre>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <!-- Explain end -->
    <div class="grid-system show-grid" style="font-size:9px; text-align:center">
        <div class="grid-row grid-first-row grid-10">
            <div class="row-wrapper">
                10%
            </div>
        </div>
        <div class="grid-row grid-10">
            <div class="row-wrapper">
                10%
            </div>
        </div>
        <div class="grid-row grid-10">
            <div class="row-wrapper">
                10%
            </div>
        </div>
        <div class="grid-row grid-10">
            <div class="row-wrapper">
                10%
            </div>
        </div>
        <div class="grid-row grid-10">
            <div class="row-wrapper">
                10%
            </div>
        </div>
        <div class="grid-row grid-10">
            <div class="row-wrapper">
                10%
            </div>
        </div>
        <div class="grid-row grid-10">
            <div class="row-wrapper">
                10%
            </div>
        </div>
        <div class="grid-row grid-10">
            <div class="row-wrapper">
                10%
            </div>
        </div>
        <div class="grid-row grid-10">
            <div class="row-wrapper">
                10%
            </div>
        </div>
        <div class="grid-row grid-10">
            <div class="row-wrapper">
                10%
            </div>
        </div>
        <div class="clear"></div>
    </div>
    
</div>