rg-flex-grid
Version:
grid with flex box
74 lines (71 loc) • 3.9 kB
HTML
<html>
<head>
<link rel="stylesheet" href="../dist/css/grid.min.css">
</head>
<body>
<div class="row">
<div class="col-1" style="background: blue">col-1</div>
<div class="col-2" style="background: green">col-2</div>
<div class="col-3" style="background: yellow">col-3</div>
<div class="col-4" style="background: red">col-4</div>
<div class="col-5" style="background: pink">col-5</div>
<div class="col-6" style="background: green">col-6</div>
<div class="col-7" style="background: yellow">col-7</div>
<div class="col-8" style="background: red">col-8</div>
<div class="col-9" style="background: pink">col-9</div>
<div class="col-10" style="background: green">col-10</div>
<div class="col-11" style="background: orange">col-11</div>
<div class="col-12" style="background: red">col-12</div>
<div class="col-6" style="background: orange">col-6</div>
<div class="col-6" style="background: green">col-md-6</div>
</div>
<div class="row">
<div class="col-sm-1" style="background: blue">col-sm-1</div>
<div class="col-sm-2" style="background: green">col-sm-2</div>
<div class="col-sm-3" style="background: yellow">col-sm-3</div>
<div class="col-sm-4" style="background: red">col-sm-4</div>
<div class="col-sm-5" style="background: pink">col-sm-5</div>
<div class="col-sm-6" style="background: green">col-sm-6</div>
<div class="col-sm-7" style="background: yellow">col-sm-7</div>
<div class="col-sm-8" style="background: red">col-sm-8</div>
<div class="col-sm-9" style="background: pink">col-sm-9</div>
<div class="col-sm-10" style="background: green">col-sm-10</div>
<div class="col-sm-11" style="background: orange">col-sm-11</div>
<div class="col-sm-12" style="background: red">col-sm-12</div>
<div class="col-sm-6" style="background: orange">col-sm-6</div>
<div class="col-sm-6" style="background: green">col-sm-6</div>
</div>
<div class="row">
<div class="col-md-1" style="background: blue">col-md-1</div>
<div class="col-md-2" style="background: green">col-md-2</div>
<div class="col-md-3" style="background: yellow">col-md-3</div>
<div class="col-md-4" style="background: red">col-md-4</div>
<div class="col-md-5" style="background: pink">col-md-5</div>
<div class="col-md-6" style="background: green">col-md-6</div>
<div class="col-md-7" style="background: yellow">col-md-7</div>
<div class="col-md-8" style="background: red">col-md-8</div>
<div class="col-md-9" style="background: pink">col-md-9</div>
<div class="col-md-10" style="background: green">col-md-10</div>
<div class="col-md-11" style="background: orange">col-md-11</div>
<div class="col-md-12" style="background: red">col-md-12</div>
<div class="col-md-6" style="background: orange">col-md-6</div>
<div class="col-md-6" style="background: green">col-md-6</div>
</div>
<div class="row">
<div class="col-lg-1" style="background: blue">col-lg-1</div>
<div class="col-lg-2" style="background: green">col-lg-2</div>
<div class="col-lg-3" style="background: yellow">col-lg-3</div>
<div class="col-lg-4" style="background: red">col-lg-4</div>
<div class="col-lg-5" style="background: pink">col-lg-5</div>
<div class="col-lg-6" style="background: green">col-lg-6</div>
<div class="col-lg-7" style="background: yellow">col-lg-7</div>
<div class="col-lg-8" style="background: red">col-lg-8</div>
<div class="col-lg-9" style="background: pink">col-lg-9</div>
<div class="col-lg-10" style="background: green">col-lg-10</div>
<div class="col-lg-11" style="background: orange">col-lg-11</div>
<div class="col-lg-12" style="background: red">col-lg-12</div>
<div class="col-lg-6" style="background: orange">col-lg-6</div>
<div class="col-lg-6" style="background: green">col-lg-6</div>
</div>
</body>
</html>