Die Beispiele (von 1 bis 17) zeigen, was man mit „Kolumnen“ anstellen kann – ohne zusätzliches Plugin.
Der hauptsächliche Inhalt fast jeder Homepage besteht aus Text, Fotos oder auch Videos.
1. Zwei Kolumnen = „one-half“
Die jeweils erste Kolumne muss immer die CSS-Klasse „first“ bekommen.
„one-half first“
Erdbeeren @ „MAMEDi“
„one-half“
Zuckertopf @ „MAMEDi“
Eine spezielle „CSS“-Klasse sorgt für eine gerade Abschlußkante bei verschieden großen Bildern oder unterschiedlichen Textmengen.
2. Verschachtelt mit weiteren „one-half“
„one-half first“
Else @ „MAMEDi“
Die Verschachtelung verschiedener Kolumnen ist ebenfalls möglich. Dadurch ergeben sich viele Varianten für eine flexible Gestaltung.
„one-half“
„one-half first“
Erdbeeren @ „MAMEDi“
Bananen @ „MAMEDi“
„one-half“
Zuckertopf @ „MAMEDi“
Keksdose @ „MAMEDi“
3. Verschachtelt mit „third(s)“
„one-half first“
Zuckertopf @ „MAMEDi“
Bei derartigen Verschachtelungen können die Bereiche (= „div“) durchaus für Verwirrung sorgen. Erst recht, wenn auch noch ein umrahmender „CSS“-Befehl für de Abschlußkante dazukommt.
„one-half“
„one-third first“
Else @ „MAMEDi“
Tachometer @ „MAMEDi“
Birnen @ „MAMEDi“
„two-thirds“
Wischeimer @ „MAMEDi“
4. Verschachtelt mit „half“ und „third(s)“
„one-half first“
Birnen @ „MAMEDi“
„one-half first“
Erdbeeren @ „MAMEDi“
„one-half“
Bananen @ „MAMEDi“
„one-half“
„two-thirds first“
Tachometer @ „MAMEDi“
So ein Text wie derjenige, welcher hier gerade zu lesen ist, kann an jeder beliebigen Stelle zwischen den Bildern eingefügt werden.
Else @ „MAMEDi“
„one-third“
Wischeimer @ „MAMEDi“
Zuckertopf @ „MAMEDi“
Keksdose @ „MAMEDi“
5. Drei Kolumnen = „one-third“
„one-third first“
Zuckertopf @ „MAMEDi“
„one-third“
Else @ „MAMEDi“
„one-third“
Erdbeeren @ „MAMEDi“
6. Verschachtelt mit „third(s)“
„one-third first“
Wischeimer @ „MAMEDi“
„two-thirds“
„one-third first“
Keksdose @ „MAMEDi“
„one-third“
Else @ „MAMEDi“
„one-third“
Tachometer @ „MAMEDi“
Eine eigens definierte „CSS“-Klasse bewirkt, dass der Text – die Bildunterschrift oder Notiz zum Bild – unter dem Bild etwas kleiner und mit einer anderen Schriftart dargestellt wird.

Birnen @ „MAMEDi“

Erdbeeren @ „MAMEDi“

Bananen @ „MAMEDi“
7. Vier Kolumnen = „one-fourth“
„one-fourth first“
Keksdose @ „MAMEDi“
„one-fourth“
Haund @ „MAMEDi“
„one-fourth“
Wischeimer @ „MAMEDi“
„one-fourth“
Zuckertopf @ „MAMEDi“
Bei einer Mischung aus hoch- und querformatigen Fotos (siehe oben) wird wieder ein spezieller „CSS“-Befehl für einen geraden Abschluß benötigt.
8. Vier Kolumnen, zwei als „two-fourths“ fusioniert
„two-fourths“
Vier Augen @ „MAMEDi“
„Vier Augen … sehen mehr als Zwei“
„Augentraining · Das Schielen als Methode“
9. Vier Kolumnen verschachtelt mit „half“
„two-fourths first“
„one-half first“
Erdbeeren @ „MAMEDi“
„one-half“
Keksdose @ „MAMEDi“
„one-half first“
Tachometer @ „MAMEDi“
„one-half“
Else @ „MAMEDi“
„one-fourth“
Wischeimer @ „MAMEDi“
„one-fourth“
Haund @ „MAMEDi“
Überschrift(en) „h1 bis h6“
Mit den Kolumnen läßt sich allerhand anstellen. Der Bereich, in dem dieser Text steht, ist z.B. ein „one-half“ und füllt den Freiraum unter obigen Bildern. Die Überschrift ist aktuell als „h4“ definiert und kann geändert, gelöscht oder für andere Zwecke benutzt werden.
10. Vier Kolumnen, drei als „three-fourths“ zusammengefaßt
„three-fourths first“
Vier Augen @ „MAMEDi“
11. Sechs Kolumnen = „one-sixth“
„one-sixth first“
Notiz @ Foto
„one-sixth“
Notiz @ Foto
„one-sixth“
Notiz @ Foto
„one-sixth“
Notiz @ Foto
„one-sixth“
Notiz @ Foto
„one-sixth“
Notiz @ Foto
12. Sechs Kolumnen, 3 + 4 = „two-sixths“
Manchmal hat man in einer Galerie ein besonders gutes Foto, welches hervorgehoben werden soll. Dafür lassen sich z.B. zwei (oder mehrere) Kolumnen zuammenfassen, wodurch das Bild mehr Fläche bekommt und größer angezeigt wird. Allerdings nur auf Desktops, Laptops und Tablets im Landscape-Modus. Auf kleineren Smartphones und beim Tablet im Portrait-Modus werden alle Bilder gleich groß und aufeinander folgend dargestellt.
„one-sixth first“
Notiz @ Foto
Notiz @ Foto
„one-sixth“
Notiz @ Foto
Notiz @ Foto
„two-sixths“
Notiz @ Foto
„one-sixth“
Notiz @ Foto
Notiz @ Foto
„one-sixth“
Notiz @ Foto
Notiz @ Foto
13. Sechs Kolumnen, 2 + 3 = „two-sixths“
Für eine Mischung aus Wischeimerigen mit Zuckertopfigen Bildern in einer Galerie bieten Kolumnen mit unterschiedlichen Zusammenfassungen ebenfalls eine interessante Möglichkeit der Darstellung. Allerdings auch wieder nur bei den größeren Ausgabegeräten wie Desktops, Laptops und Tablets im Landscape-Modus.
„one-sixth first“
Notiz @ Foto
Notiz @ Foto
Notiz @ Foto
„two-sixths“
Notiz @ Foto
Notiz @ Foto
„one-sixth“
Notiz @ Foto
Notiz @ Foto
Notiz @ Foto
„one-sixth“
Notiz @ Foto
Notiz @ Foto
„one-sixth“
Notiz @ Foto
Notiz @ Foto
14. Sechs Kolumnen, 1 + 2 = „two-sixths“ und 4 + 5 + 6 = „three-sixths“ verschachtelt mit „half“
„two-sixths first“
Der Text zu einer Galerie kann natürlich auch über einem Bild stehen, wie es hier gerade zu sehen ist.
Notiz @ Foto
Diese Galerie besteht aus neun Bildern, von denen zwei durch die größere Fläche hervorgehoben werden. Eines davon ist im Wischeimer (siehe oben) und das zweite Foto befindet sich im „three-sixths“-Bereich, in dem unten zwei weitere Kolumnen („half“) integriert sind.
„one-sixth“
Notiz @ Foto
Notiz @ Foto
Notiz @ Foto
Notiz @ Foto
Notiz @ Foto
„three-sixths“
Notiz @ Foto
Die Arbeit und das Layouten mit den Kolumnen ist sicher alles andere als langweilig und bietet Spielraum für sehr abwechslungsreiche Gestaltungen.
„one-half first“
Notiz @ Foto
„one-half“
Notiz @ Foto
15. Sechs Kolumnen, Variation (von Beispiel 14) verschachtelt mit „half“
„three-sixths first“
Notiz @ Foto
Es lassen sich die unterschiedlichsten Gruppen – mit Texten an beliebigen Stellen dazwischen – bilden. Die Technik (= Kolumnen) ist dabei gar nicht das Komplizierteste, sondern vielmehr die kreative Idee und deren Umsetzung.
„one-half first“
Notiz @ Foto
„one-half“
Notiz @ Foto
„one-sixth“
Notiz @ Foto
Notiz @ Foto
Notiz @ Foto
Notiz @ Foto
Notiz @ Foto
„two-sixths“
Man muss sich insbesondere Gedanken über eine sinnvolle Reihenfolge von Bildern und Texten machen, weil die Kolumnen auf den Monitoren kleinerer Geräte untereinander dargestellt werden.
Notiz @ Foto
Notiz @ Foto
16. Sechs Kolumnen, weitere Variation verschachtelt mit „half“
„two-sixths first“
Notiz @ Foto
Notiz @ Foto
„one-sixth“
Notiz @ Foto
Notiz @ Foto
Notiz @ Foto
„three-sixths“
„one-half first“
Notiz @ Foto
Notiz @ Foto
„one-half“
Notiz @ Foto
Notiz @ Foto
17. Gemischte = „half“, „third“, „fourth“, „half“
„one-half first“
Notiz @ Foto
„one-half“
Notiz @ Foto
„one-third first“
Notiz @ Foto
„one-third“
Eine Mischung aus verschiedenen Reihen mit zwei, drei oder vier Kolumnen sieht auch schon wirklich sehr gut aus. Dabei kann selbstverständlich auch eine der Kolumnen für den Text genutzt werden.
Auf unterschiedlichen Geräten wird der Text nicht immer optimal dargestellt, weshalb wieder der spezielle „CSS“-Befehl für eine gerade Abschlußkante sorgt.
„one-third“
Notiz @ Foto
„one-fourth first“
Notiz @ Foto
„one-fourth“
Notiz @ Foto
„one-fourth“
Notiz @ Foto
„one-fourth“
Notiz @ Foto
„one-half first“
Notiz @ Foto
„one-half“
Notiz @ Foto

„MAMEDi“