Raster-Elemente

Beispiele für Rasterelemente

Im Folgendem wurde ein Inhaltselement Accordion mit Inhaltselementen 2-Grid, 3 Grid und 4 Grid verwendet, jeweils mit verschiedenen Proportionen.

Schon gewusst? 4:4:4 ist nicht dasselbe wie 12:12:12
kurz erklärt:
Sie haben immer 12 Breiteneinheiten

Beispiel 3-Spalten (3 Grid)
- bei 4:4:4 werden diese gedrittelt (4/12=1/3= 33,33%), d.h. 3 gleichbreite Spalten (33,33%) nebeneinander
- bei 3.3:6 werden die Spalten zu 3/12, 3/12 und 6/12 aufgeteilt, also 2 schmale Spalten (25%) und rechts eine breite Spalte (50%)
- bei 12:12:12 braucht jede Spalte schon selbst 12 Breiteneinheiten (12/12 = 100%) und deshalb werden die 3 "Spalten" untereinander angeordnet
Beispiel 4-Spalten (4 Grid)
- bei 3.3.3:3 werden diese geviertelt (3/12=1/4=25%), also 4 Spalten (25%) nebeneinander
- bei 6:6:6:6 werden diese halbiert (6/12=1/2=50%), also 2 Spalten (50%) nebeneinander und demzufolge nochmal untereinnder
- bei 12:12:12:12 braucht jede Spalte schon selbst 12 Breiteneinheiten (12/12 = 100%) und deshalb werden die 4 "Spalten" untereinander
- angeordnet

2-Spalten 6:6

Text der ersten Spalte

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.

Text mit Bild der zweiten Spalte

2-Spalten 4:8

Text der ersten Spalte

Text mit Bild der zweiten Spalte

2-Spalten 12:12

Text der ersten Spalte

Text mit Bild der zweiten Spalte

3-Spalten 4:4:4

Text der ersten Spalte

Text mit Bild der zweiten Spalte

3. Spalte

3-Spalten 3:3:6

Text der ersten Spalte

Text mit Bild der zweiten Spalte

3. Spalte

3-Spalten 6:6:12

Text der ersten Spalte

Text mit Bild der zweiten Spalte

3. Spalte

3-Spalten 12:12:12

Text der ersten Spalte

Text mit Bild der zweiten Spalte

3. Spalte

4-Spalten 3:3:3:3

Text der ersten Spalte

Text mit Bild der zweiten Spalte

3. Spalte

4. Spalte

4-Spalten 6:6:6.6

Text der ersten Spalte

Text mit Bild der zweiten Spalte

3. Spalte

4. Spalte

4-Spalten 12:12:12:12

Raster-Elemente

Raster-Elemente

Beispiele für Rasterelemente

Text der ersten Spalte

Text mit Bild der zweiten Spalte

Text der ersten Spalte

Text mit Bild der zweiten Spalte

Text der ersten Spalte

Text mit Bild der zweiten Spalte

Text der ersten Spalte

Text mit Bild der zweiten Spalte

3. Spalte

Text der ersten Spalte

Text mit Bild der zweiten Spalte

3. Spalte

Text der ersten Spalte

Text mit Bild der zweiten Spalte

3. Spalte

Text der ersten Spalte

Text mit Bild der zweiten Spalte

3. Spalte

Text der ersten Spalte

Text mit Bild der zweiten Spalte

3. Spalte

4. Spalte

Text der ersten Spalte

Text mit Bild der zweiten Spalte

3. Spalte

4. Spalte

Text der ersten Spalte

Text mit Bild der zweiten Spalte

3. Spalte

4. Spalte

Tabs

Text des ersten Tab

Text mit Bild des zweiten Tab

Text des 3. Tab

Text des 4. Tab