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.