Grilla

Al igual que en Bootstrap las columnas se definen utilizando clases tales como 'col-xxs-#', 'col-xs-#', 'col-sm-#', 'col-md-#', 'col-lg-#'

XS-1
XS-1
XS-1
XS-1
XS-1
XS-1
XS-1
XS-1
XS-1
XS-1
XS-1
XS-1
XS-2
XS-2
XS-2
XS-2
XS-2
XS-2
XS-3
XS-3
XS-3
XS-3
XS-4
XS-4
XS-4
XS-6
XS-6
XS-12
XXS-4
XXS-4
XXS-4
<div class="row">
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>
</div>
<div class="row">
<div class="col-xxs-4">...</div>
<div class="col-xxs-8">...</div>
</div>

NOTA: la clase col-xxs-# 'flota' eternamente.


Combinación de Columnas

Las columnas pueden combinarse entre si para formar diferentes layouts y reacomodarse según la resolución.

SM-6 / MD-3
SM-6 / MD-3
SM-6 / MD-3
SM-6 / MD-3
SM-2 / MD-3 / LG-4
SM-5 / MD-6 / LG-4
SM-5 / MD-3 / LG-4
SM-2
SM-8
SM-2
<div class="row">
<div class="col-sm-2 col-md-3 col-lg-4">...</div>
<div class="col-sm-5 col-md-6 col-lg-4">...</div>
<div class="col-sm-5 col-md-3 col-lg-4">...</div>
</div>

Anidado de Columnas

Flexibilidad para anidar columans logrando layouts más complejos.

XS-12 (parent)

XS-8 / SM-6 (child)
XS-4 / SM-6(child)
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-8 col-sm-6">...</div>
<div class="col-xs-4 col-sm-6">...</div>
</div>
</div>
</div>
dosLotos Grid v.1.1.1
Autor Carlos 'Ruso' Cucurullo
doslotos ©