Grid elements

Estos elementos sirven para configurar la estructura de una página: Dividirla en columnas, "romper" la estructura con elementos borde a borde, etc...

Page container

Es un contenedor en el que se puede incluir cualquier tipo de contenido, incluyendo contenidos grid de columnas. 

Su principal función es configurar el ancho de un bloque:

  • A todo ancho (borde a borde).
  • Centrado.
  • Centrado con color de fondo.

Para centrar los contenidos es necesario que exista uno en cada página.

Contenido centrado

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sodales sagittis. Quisque tincidunt tellus id turpis maximus, feugiat semper augue mattis. Donec commodo tempor lacus eget imperdiet. Quisque tristique molestie urna, at lobortis sem suscipit non. Donec ac facilisis purus, vel vestibulum urna. Suspendisse lorem ante, auctor vel porta sed, rutrum ut ligula. Vestibulum dictum lectus lacus, ac eleifend tortor tempus ac.

Contenido borde a borde

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sodales sagittis. Quisque tincidunt tellus id turpis maximus, feugiat semper augue mattis. Donec commodo tempor lacus eget imperdiet. Quisque tristique molestie urna, at lobortis sem suscipit non. Donec ac facilisis purus, vel vestibulum urna. Suspendisse lorem ante, auctor vel porta sed, rutrum ut ligula. Vestibulum dictum lectus lacus, ac eleifend tortor tempus ac.

Grid 2 columnas

Un contenido preconfigurado para 2 columnas, en el que es posible configurar el tamaño de cada una para ajustarla al diseño deseado. 

Columna 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sodales sagittis. Quisque tincidunt tellus id turpis maximus, feugiat semper augue mattis. Donec commodo tempor lacus eget imperdiet. Quisque tristique molestie urna, at lobortis sem suscipit non. Donec ac facilisis purus, vel vestibulum urna. Suspendisse lorem ante, auctor vel porta sed, rutrum ut ligula. Vestibulum dictum lectus lacus, ac eleifend tortor tempus ac.

Columna 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sodales sagittis. Quisque tincidunt tellus id turpis maximus, feugiat semper augue mattis. Donec commodo tempor lacus eget imperdiet. Quisque tristique molestie urna, at lobortis sem suscipit non. Donec ac facilisis purus, vel vestibulum urna. Suspendisse lorem ante, auctor vel porta sed, rutrum ut ligula. Vestibulum dictum lectus lacus, ac eleifend tortor tempus ac.

Grid 3 columnas

Un contenido preconfigurado para 3 columnas, en el que es posible configurar el tamaño de cada una para ajustarla al diseño deseado. 

Columna 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sodales sagittis. Quisque tincidunt tellus id turpis maximus, feugiat semper augue mattis. Donec commodo tempor lacus eget imperdiet. Quisque tristique molestie urna, at lobortis sem suscipit non. Donec ac facilisis purus, vel vestibulum urna. Suspendisse lorem ante, auctor vel porta sed, rutrum ut ligula. Vestibulum dictum lectus lacus, ac eleifend tortor tempus ac.

Columna 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sodales sagittis. Quisque tincidunt tellus id turpis maximus, feugiat semper augue mattis. Donec commodo tempor lacus eget imperdiet. Quisque tristique molestie urna, at lobortis sem suscipit non. Donec ac facilisis purus, vel vestibulum urna. Suspendisse lorem ante, auctor vel porta sed, rutrum ut ligula. Vestibulum dictum lectus lacus, ac eleifend tortor tempus ac.

Columna 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sodales sagittis. Quisque tincidunt tellus id turpis maximus, feugiat semper augue mattis. Donec commodo tempor lacus eget imperdiet. Quisque tristique molestie urna, at lobortis sem suscipit non. Donec ac facilisis purus, vel vestibulum urna. Suspendisse lorem ante, auctor vel porta sed, rutrum ut ligula. Vestibulum dictum lectus lacus, ac eleifend tortor tempus ac.

Grid 4 columnas

Un contenido preconfigurado para 4 columnas, en el que es posible configurar el tamaño de cada una para ajustarla al diseño deseado. 

Columna 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sodales sagittis. Quisque tincidunt tellus id turpis maximus, feugiat semper augue mattis. Donec commodo tempor lacus eget imperdiet. Quisque tristique molestie urna, at lobortis sem suscipit non. Donec ac facilisis purus, vel vestibulum urna. Suspendisse lorem ante, auctor vel porta sed, rutrum ut ligula. Vestibulum dictum lectus lacus, ac eleifend tortor tempus ac.

Columna 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sodales sagittis. Quisque tincidunt tellus id turpis maximus, feugiat semper augue mattis. Donec commodo tempor lacus eget imperdiet. Quisque tristique molestie urna, at lobortis sem suscipit non. Donec ac facilisis purus, vel vestibulum urna. Suspendisse lorem ante, auctor vel porta sed, rutrum ut ligula. Vestibulum dictum lectus lacus, ac eleifend tortor tempus ac.

Columna 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sodales sagittis. Quisque tincidunt tellus id turpis maximus, feugiat semper augue mattis. Donec commodo tempor lacus eget imperdiet. Quisque tristique molestie urna, at lobortis sem suscipit non. Donec ac facilisis purus, vel vestibulum urna. Suspendisse lorem ante, auctor vel porta sed, rutrum ut ligula. Vestibulum dictum lectus lacus, ac eleifend tortor tempus ac.

Columna 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sodales sagittis. Quisque tincidunt tellus id turpis maximus, feugiat semper augue mattis. Donec commodo tempor lacus eget imperdiet. Quisque tristique molestie urna, at lobortis sem suscipit non. Donec ac facilisis purus, vel vestibulum urna. Suspendisse lorem ante, auctor vel porta sed, rutrum ut ligula. Vestibulum dictum lectus lacus, ac eleifend tortor tempus ac.