Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Sistema grid basado en la propiedad flex

Sistema grid basado en la propiedad flex 21.OCT.15

Alvaro José Rios Ch
Fundador WebBizarro

Los sistemas grid facilitan el trabajo de maquetar sitios web y podemos encontrar muchos de diferentes tipos, desde sistemas estaticos como BluePrint hasta algunos muy flexibles como Flexbox Grid. La novedad de este pequeño framework front end es que no usa floats para crear los layouts sino la propiedad flex de CSS que es soportada por la mayoría de los navegadores modernos y es mucho más manejable que los floats.

Es muy simple de usar simplemente importar la librería y comenzar a maquetar.

<div class="row">
    <div class="col-xs-12">
        <div class="box">12</div>
    </div>
</div>

Como pueden ver encontramos 3 niveles, el primero la fila (row), luego la columna (col) y finalmente el contenido de cada columna.

El tamaño de las columnas esta expresado en porcentaje por lo que el contenido se adapta al tamaño de la pantalla, además puedes cambiar el comportamiento de cada columna dependiendo del tamaño de la pantalla de la siguiente manera.

<div class="row">
    <div class="col-xs-12
    col-sm-8
    col-md-6
    col-lg-4">
        <div class="box">Responsive</div>
    </div>
</div>

Como pueden ver hay diferentes clases para las principales resoluciones y al redimensionar la pantalla el tamaño de la columna cambia.

Otra característica interesante es el auto width donde el tamaño de cada columna depende el número de columnas en la fila.

<div class="row">
    <div class="col-xs">
        <div class="box">auto</div>
    </div>
</div>

También tiene clases que te permiten manejar ordenamiento, distribución y alineación del contenido lo que hace más fácil llevar a cabo estas tareas.

Como pueden ver un framework pequeño pero efectivo que les puede ayudar a crear un diseño adaptable sin tener que importar pesadas librerías.