Gridelemente

Gilt für alle Bildschirmgrößen, nur auf dem Smartphone werden die Spalten untereinander angeordnet.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in.


2-Spalter 7 / 5

Gilt für alle Bildschirmgrößen, nur auf dem Smartphone werden die Spalten untereinander angeordnet.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum.


2-Spalter 5 / 7

Gilt für alle Bildschirmgrößen, nur auf dem Smartphone werden die Spalten untereinander angeordnet.

Ich bin eine Spaltenüberschrift

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum.

Ich bin auch eine Spaltenüberschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.


2-Spalter 8 / 4

Gilt für den Desktopbrowser. Auf dem Tablet wird hoch und quer ein 7 / 5 Raster angezeigt. Auf dem Smartphone werden die Spalten untereinander angeordnet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 


2-Spalter 4 / 8

Gilt für alle Bildschirmgrößen, nur auf dem Smartphone werden die Spalten untereinander angeordnet.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. 

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque sagittis sem at sodales lacinia.


2-Spalter 9 / 3

 Gilt für den Desktopbrowser. Auf dem Tablet wird hoch und quer ein 8 / 4 Raster angezeigt. Auf dem Smartphone werden die Spalten untereinander angeordnet. 

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque vel ex eget ante sodales maximus id molestie leo. Praesent sed sapien mauris. Suspendisse potenti. Curabitur pellentesque urna sed arcu pulvinar sollicitudin. Cras vel velit malesuada, tincidunt enim sit amet, commodo ante. Duis quis lectus purus. Nam non tellus id nibh scelerisque varius. In hac habitasse platea dictumst. Sed non elementum massa. Nullam et posuere tortor. Curabitur lectus justo, rhoncus sed sollicitudin sit amet, commodo et leo. Duis mollis venenatis nisl maximus viverra.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque vel ex eget ante sodales maximus id molestie leo. Praesent sed sapien mauris. Suspendisse potenti. Curabitur pellentesque urna sed arcu pulvinar sollicitudin. Cras vel velit malesuada, tincidunt enim sit amet, commodo ante. Duis quis lectus purus. Nam non tellus id nibh scelerisque varius. In hac habitasse platea dictumst. Sed non elementum massa. Nullam et posuere tortor. Curabitur lectus justo, rhoncus sed sollicitudin sit amet, commodo et leo. Duis mollis venenatis nisl maximus viverra.


2-Spalter 3 / 9

 Gilt für den Desktopbrowser. Auf dem Tablet wird hoch und quer ein 4 / 8 Raster angezeigt. Auf dem Smartphone werden die Spalten untereinander angeordnet. 

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque vel ex eget ante sodales maximus id molestie leo. Praesent sed sapien mauris. Suspendisse potenti. Curabitur pellentesque urna sed arcu pulvinar sollicitudin. Cras vel velit malesuada, tincidunt enim sit amet, commodo ante. Duis quis lectus purus. Nam non tellus id nibh scelerisque varius. In hac habitasse platea dictumst. Sed non elementum massa. Nullam et posuere tortor. Curabitur lectus justo, rhoncus sed sollicitudin sit amet, commodo et leo. Duis mollis venenatis nisl maximus viverra.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque vel ex eget ante sodales maximus id molestie leo. Praesent sed sapien mauris. Suspendisse potenti. Curabitur pellentesque urna sed arcu pulvinar sollicitudin. Cras vel velit malesuada, tincidunt enim sit amet, commodo ante. Duis quis lectus purus. Nam non tellus id nibh scelerisque varius. In hac habitasse platea dictumst. Sed non elementum massa. Nullam et posuere tortor. Curabitur lectus justo, rhoncus sed sollicitudin sit amet, commodo et leo. Duis mollis venenatis nisl maximus viverra.


3-Spalter 7 / 1 / 4

Die mittlere Spalte erzeugt eine Lücke ohne Inhalt. Die Aufteilung ist demnach für den Desktopbrowser 8 / 4 und für Tablet hoch und quer 7 / 5. Auf dem Smartphone werden die Spalten untereinander angeordnet.


Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 


3-Spalter 4 / 1 / 7

Die mittlere Spalte erzeugt eine Lücke ohne Inhalt und gilt für den Desktopbrowser. Für Tablet hoch und quer: 5 / 7. Auf dem Smartphone werden die Spalten untereinander angeordnet.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


3-Spalter 8 / 1 / 3

Die mittlere Spalte erzeugt eine Lücke ohne Inhalt und gilt für den Desktopbrowser. Für Tablet hoch gilt 7 / 0 / 5 und quer 8 / 1 / 3. Auf dem Smartphone werden die Spalten untereinander angeordnet.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.


3-Spalter 3 / 1 / 8

Die mittlere Spalte erzeugt eine Lücke ohne Inhalt und gilt für den Desktopbrowser sowie Tablet quer. Für Tablet hoch wird das Raster auf 4 / 0 / 8 angezeigt . Auf dem Smartphone werden die Spalten untereinander angeordnet.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 


3-Spalter 4 / 4 / 4

Gilt für die Bildschirmgrößen Desktopbrowser und Tablet quer. Auf dem Tablet hoch werden die Spalten in einem 12 / 6 / 6 angezeigt und auf dem Smartphone werden die Spalten untereinander angeordnet.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque vel ex eget ante sodales maximus id molestie leo. Praesent sed sapien mauris. Suspendisse potenti. Curabitur pellentesque urna sed arcu pulvinar sollicitudin. Cras vel velit malesuada, tincidunt enim sit amet, commodo ante. 

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque vel ex eget ante sodales maximus id molestie leo. Praesent sed sapien mauris. Suspendisse potenti. Curabitur pellentesque urna sed arcu pulvinar sollicitudin. Cras vel velit malesuada, tincidunt enim sit amet, commodo ante. 

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque vel ex eget ante sodales maximus id molestie leo. Praesent sed sapien mauris. Suspendisse potenti. Curabitur pellentesque urna sed arcu pulvinar sollicitudin. Cras vel velit malesuada, tincidunt enim sit amet, commodo ante. 


3-Spalter 3 / 6 / 3

Gilt für den Desktopbrowser. Auf dem Tablet wird hoch wird ein 2 / 8 / 2 Raster angezeigt. Auf dem Smartphone werden die Spalten untereinander angeordnet.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in.


3-Spalter 2 / 8 / 2

Gilt für den Desktopbrowser. Auf dem Tablet hoch und dem Smartphone werden die Spalten untereinander angeordnet.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in.


3-Spalter 1 / 10 / 1

Gilt für den Desktopbrowser. Auf dem Tablet hoch und dem Smartphone werden die Spalten untereinander angeordnet.

Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in. Pellentesque sagittis sem at sodales lacinia. Pellentesque et vulputate metus, in dapibus risus. Aliquam in nisi libero. Integer porttitor sagittis purus, eu fermentum sapien tincidunt in.


4-Spalter 3 / 3 / 3 / 3

Gilt für den Desktop und Tablet quer. Auf dem Tablet hoch und dem Smartphone werden zwei Zweispalter untereinander dargestellt.

Pellentesque sagittis sem at sodales lacinia. Pellentesque.

Pellentesque sagittis sem at sodales lacinia. Pellentesque.

Pellentesque sagittis sem at sodales lacinia. Pellentesque.

Pellentesque sagittis sem at sodales lacinia. Pellentesque.


6-Spalter 2 / 2 / 2 / 2 / 2 / 2

Gilt für den Desktop und Tablet quer. Auf dem Tablet hoch und dem Smartphone werden zwei Zweispalter untereinander dargestellt.