Blog de Jose Alvarado

Jose Alvarado

Venezolano. 21 años. Estudiante de ingeniería civil y desarrollador web.

Flexbox Grid como sistema de grillas flexibles

hace 18 meses por
josealvaradoo
en
Sistema de grillas Flexbox

En los últimos tiempos se han estado usando Frameworks y micro frameworks para el diseño web, como en el caso de Bootstrap, Foundation, etc. Éstos frameworks traen consigo una gran cantidad de estilos predefinidos, pero sobre todo sus sistemas de grilla para organizar el contenido en filas y columnas. Por otro lado, existe el micro framework CSS Flexbox Grid, que contiene únicamente un diseño predefinido de filas y columnas, una grilla, pero con algo muy particular que lo define su propio nombre: Flexbox.

Flexbox es una propiedad relativamente nueva en CSS3 que reemplaza el uso de las propiedades float en ciertas ocaciones al momento de diseñar, que en comparación con el sistema de grillas de Bootstrap, el cual hace uso de las propiedades float, Flexbox Grid usa las propiedades flex.

Como framework, una de las cosas que más me gusta de Flexbox Grid es que solo se enfoca en su sistema de grillas (Grid System) y no en todos los demás estilos que muchas veces queremos omitir para hacer diseños más personalizados siguiendo un buen orden de filas y columnas.

Su uso es realmente sencillo, pues solo se trata de un archivo CSS que contiene todos los estilos ya fabricados. Y la forma en como se usa está muy bien explicada en el sitio web de Flexbox Grid.

Ni siquiera es necesario que tengas conocimientos de las propiedades Flexbox, aunque si eres de Frontend, realmente te recomiendo que empieces a leer un poco de ello y también aquí una guía bien completa de Flexbox en inglés.

Ejemplo de uso

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Grid</title>
    <link rel="stylesheet" href="styles/flexboxgrid.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">Columna 1</div>
            <div class="col-md-4">Columna 2</div>
            <div class="col-md-4">Columna 3</div>
        </div>
    </div>
</body>
</html>

¿Conoces algún otro sistema de grillas? Comparte tus experiencias con los frameworks que usas para hacer grillas abajo en los comentarios.