kzsen-kzhtml
/
grid.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>kzphp grid</title>
    <meta name="description" content="Demo of kzphp Grid system">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/rwdgrid.css">
    <link rel="stylesheet" href="css/style.css">
    <!--[if lt IE 9]>
    <script src="js/html5shiv-3-respond-1.1.0.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>


<div class="container">
    <div class="grid-d-8 grid-t-8 grid-tl-4 grid-m-6"><p>grid-8-d(Desktop 8) <br>grid-tl-9(Tablet Landscape 9) <br>grid-t-3 (Tablet 3)   <br> grid-m-6(Mobile Devices 6)</p></div>
    <div class="grid-d-4 grid-t-4 grid-tl-8 grid-m-6"><p>grid-4-d(Desktop 4) <br>grid-tl-3(Tablet Landscape 3) <br>grid-t-9 (Tablet 9)   <br> grid-m-6(Mobile Devices 6)</p></div>
</div>
<div class="container">
    <div class="grid-12">
        <p> grid 12 </p>
    </div>
    <div class="grid-1">
        <p> grid 1 </p>
    </div>
    <div class="grid-11">
        <p> grid 11 </p>
    </div>
    <div class="grid-2">
        <p> grid  2 </p>
    </div>
    <div class="grid-10">
        <p> grid 12 </p>
    </div>
    <div class="grid-3">
        <p> grid 3 </p>
    </div>
    <div class="grid-9">
        <p> grid 9 </p>
    </div>
    <div class="grid-4">
        <p> grid 4 </p>
    </div>
    <div class="grid-8">
        <p> grid 8 </p>
    </div>
    <div class="grid-5">
        <p> grid 5 </p>
    </div>
    <div class="grid-7">
        <p> grid 7 </p>
    </div>
    <div class="grid-6">
        <p> grid 6 - Nesting </p>
        <div class="nest">
            <div class="grid-6">
                <p>x</p>
            </div>
            <div class="grid-6">
                <p>x</p>
                <div class="nest">
                    <div class="grid-3">
                        <p>x</p>
                    </div>
                    <div class="grid-9">
                        <p>x</p>
                        <div class="nest">
                            <div class="grid-6">
                                <p>x</p>
                            </div>
                            <div class="grid-6">
                                <p>x</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid-6">
        <p> grid 6 </p>
    </div>

    <div class="grid-7">
        <p> grid 7 </p>
    </div>
    <div class="grid-5">
        <p> grid 5 </p>
    </div>

    <div class="grid-8">
        <p> grid 8 </p>
    </div>
    <div class="grid-4">
        <p> grid 4 </p>
    </div>

    <div class="grid-9">
        <p> grid 9 </p>
    </div>
    <div class="grid-3">
        <p> grid 3 </p>
    </div>
    <div class="grid-10">
        <p> grid 10 </p>
    </div>
    <div class="grid-2">
        <p> grid 2 </p>
    </div>

    <div class="grid-11">
        <p> grid 11 </p>
    </div>
    <div class="grid-1">
        <p> grid 1 </p>
    </div>

    <div class="grid-12">
        <p> grid 12 </p>
    </div>
</div>
</div>
</body>
</html>