Organizándonos
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-rejilla y los diferentes tipos que te hemos preparado.
Utilizando esta clase tendrás 1 fila con 3 columnas que se extenderan ajustandose al contenido a lo alto. En dispositivos menores de 800px de ancho pasan a mostrarse en una sola columna seguidas unas de otras.
Utilizando esta clase tendrás 1 fila con 4 columnas que se extenderan ajustandose al contenido a lo alto. En dispositivos menores de 800px de ancho pasan a mostrarse en una sola columna seguidas unas de otras.
Utilizando esta clase tendrás 2 filas con 3 columnas que se extenderan ajustandose al contenido a lo alto. En dispositivos menores de 800px de ancho pasan a mostrarse en una sola columna seguidas unas de otras.
Utilizando esta clase tendrás 2 filas con 4 columnas que se extenderan ajustandose al contenido a lo alto. En dispositivos menores de 800px de ancho pasan a mostrarse en una sola columna seguidas unas de otras.
Si quieres puedes meter CARDS dentro de cada una de las columnas. Consulta la sección CARDS para ver como. ¡Es muy sencillo!
Es muy sencillo, solo tienes que copiar este código. En el hay un div con la clase rejilla2x3. Dentro tendrás que tener tantos DIV como filas x columnas tenga tu rejilla. En el ejemplo hemos puesto una rejilla de 2x3 (por eso dentro hay 6 div), pero puedes utilizar cualquiera de las 4 clases: .rejilla1x3 | .rejilla1x4 | .rejilla2x3 | .rejilla2x4
<div class="rejilla2x3"> <div>Aquí el contenido de la columna 1 de la 1ª fila</div> <div>Aquí el contenido de la columna 2 de la 1ª fila</div> <div>Aquí el contenido de la columna 3 de la 1ª fila</div> <div>Aquí el contenido de la columna 1 de la 2ª fila</div> <div>Aquí el contenido de la columna 2 de la 2ª fila</div> <div>Aquí el contenido de la columna 3 de la 2ª fila</div> </div>