Сетка
Наше решение построено на 24 колоночной сетке, более подробно о применении можно почитать тут.
Отличие лишь в том, что framework bootstrap, который используется в нашем решении, построен на 12 колоночной сетке.
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
<div class="row demo-grid">
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
<div class="col-md-1"><span class="grid-block">1</span></div>
</div>
2
2
2
2
2
2
2
2
2
2
2
2
<div class="row demo-grid">
<div class="col-sm-2"><span class="grid-block">2</span></div>
<div class="col-sm-2"><span class="grid-block">2</span></div>
<div class="col-sm-2"><span class="grid-block">2</span></div>
<div class="col-sm-2"><span class="grid-block">2</span></div>
<div class="col-sm-2"><span class="grid-block">2</span></div>
<div class="col-sm-2"><span class="grid-block">2</span></div>
<div class="col-sm-2"><span class="grid-block">2</span></div>
<div class="col-sm-2"><span class="grid-block">2</span></div>
<div class="col-sm-2"><span class="grid-block">2</span></div>
<div class="col-sm-2"><span class="grid-block">2</span></div>
<div class="col-sm-2"><span class="grid-block">2</span></div>
<div class="col-sm-2"><span class="grid-block">2</span></div>
</div>
4
4
4
4
4
4
<div class="row demo-grid">
<div class="col-xs-4"><span class="grid-block">4</span></div>
<div class="col-xs-4"><span class="grid-block">4</span></div>
<div class="col-xs-4"><span class="grid-block">4</span></div>
<div class="col-xs-4"><span class="grid-block">4</span></div>
<div class="col-xs-4"><span class="grid-block">4</span></div>
<div class="col-xs-4"><span class="grid-block">4</span></div>
</div>
6
6
6
6
<div class="row demo-grid">
<div class="col-xs-6"><span class="grid-block">6</span></div>
<div class="col-xs-6"><span class="grid-block">6</span></div>
<div class="col-xs-6"><span class="grid-block">6</span></div>
<div class="col-xs-6"><span class="grid-block">6</span></div>
</div>
8
8
8
<div class="row demo-grid">
<div class="col-xs-8"><span class="grid-block">8</span></div>
<div class="col-xs-8"><span class="grid-block">8</span></div>
<div class="col-xs-8"><span class="grid-block">8</span></div>
</div>
12
12
<div class="row demo-grid">
<div class="col-xs-12"><span class="grid-block">12</span></div>
<div class="col-xs-12"><span class="grid-block">12</span></div>
</div>
24
<div class="row demo-grid">
<div class="col-xs-24"><span class="grid-block">24</span></div>
</div>
4
8
8
4
<div class="row demo-grid">
<div class="col-xs-4"><span class="grid-block">4</span></div>
<div class="col-xs-8"><span class="grid-block">8</span></div>
<div class="col-xs-8"><span class="grid-block">8</span></div>
<div class="col-xs-4"><span class="grid-block">4</span></div>
</div>
10
10
<div class="row demo-grid">
<div class="col-xs-10 col-xs-offset-2"><span class="grid-block">10</span></div>
<div class="col-xs-10"><span class="grid-block">10</span></div>
</div>
8
<div class="row demo-grid">
<div class="col-xs-8 col-xs-offset-8"><span class="grid-block">8</span></div>
</div>
4
4
4
4
<div class="row demo-grid">
<div class="col-xs-4"><span class="grid-block">4</span></div>
<div class="col-xs-4 col-xs-offset-4"><span class="grid-block">4</span></div>
<div class="col-xs-4"><span class="grid-block">4</span></div>
<div class="col-xs-4 col-xs-offset-4"><span class="grid-block">4</span></div>
</div>