Bloques

Una manera de distribuir la información en tu web

En este framework tienes dos formas para estructurar las secciones de cada una de las páginas. Puedes crear rejillas (basadas en gridlayout) o bloques (que funcionan con flex).

Ahora te vamos a explicar como usar tus secciones-bloque y los diferentes tipos que te hemos preparado.

TIPOS

Bloque con filas

.filas

Utilizando esta clase tus div se organizarán en una fila, y cuando no quede espacio, pasaran a la siguiente. Se basa en FLEX / ROW / WRAP.

Bloque en columna

.columnacentrada

Utilizando esta clase tus div se organizarán en una columna, y los elementos estarán centrados. Se basa en FLEX / COLUMN / NOWRAP.

Si quieres puedes meter CARDS dentro de tus DIVS. Consulta la sección CARDS para ver como. ¡Es muy sencillo!

¿Cómo coloco los elementos en FILA?

Es muy sencillo, solo tienes que copiar este código o utilizar la clase .filas. Dentro tendrás que tener tantos DIV como quieras. En el ejemplo hemos puesto una 6 elementos con fondo blanco pero puedes utilizar los elementos que quieras, incluidas cards e imágenes.


<div class="filas">
    <div class="fondo_blanco">Aquí el elemento 1</div>
    <div class="fondo_blanco">Aquí el elemento 2</div>
    <div class="fondo_blanco">Aquí el elemento 3</div>
    <div class="fondo_blanco">Aquí el elemento 4</div>
    <div class="fondo_blanco">Aquí el elemento 5</div>
    <div class="fondo_blanco">Aquí el elemento 6</div>
</div>

Así se ve el código de ejemplo

Aquí el elemento 1

Aquí el elemento 2

Aquí el elemento 3

Aquí el elemento 4

Aquí el elemento 5

Aquí el elemento 6

¿Cómo coloco los elementos en una COLUMNA centrada?

Es muy sencillo, solo tienes que copiar este código o utilizar la clase columnacentrada. Dentro podrás tener tantos DIV como quieras. En el ejemplo hemos puesto una 6 elementos con fondo blanco pero puedes utilizar los elementos que quieras, incluidas cards e imágenes.


<div class="columnacentrada">
    <div class="fondo_blanco">Aquí el elemento 1</div>
    <div class="fondo_blanco">Aquí el elemento 2</div>
    <div class="fondo_blanco">Aquí el elemento 3</div>
    <div class="fondo_blanco">Aquí el elemento 4</div>
    <div class="fondo_blanco">Aquí el elemento 5</div>
    <div class="fondo_blanco">Aquí el elemento 6</div>
</div>