SpaltenSet
Die folgenden Spaltensets können im Contenbereich für 2,3 oder 4 Spalten eingesetzt werden. Gängige SpaltenSets für Bild / Text und andere Inhalte können als Vorlage kopiert werden.
Hier ein Beispiel bei dem das Text-Element selbst die Einstellung für die Spaltenbreite hat. Ab kleiner 768px wird der 2/3 Spalter zum Einspalter-Layout.
2 Spalten - 50/50%
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
2 Spalten - Bilder / Logos - 25/25%
2 Spalten - 70/30%
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
2 Spalten - 30/70%
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
3 Spalten - 33/33/33%
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
3 Spalten - Bilder / Logos - 33/33/33%
4 Spalten - 25/25/25/25%
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.
4 Spalten - Bilder / Logos - 25/25/25/25%
Grid
Das Theme setzt auf Bootstrap Grid. Es ermöglicht es dir, die Grid CSS-Klassen des Themes zu verwenden.
Grid-Klassen
Die Besonderheit bei diesem Grid: Du kannst für jeden Viewport eine individuelle Breite festlegen. Grid Klassen sind nach dem Schema .col-[viewport]-[cols] aufgebaut. Es gibt standardmäßig 5 Viewports xs, sm, md, lg und xl, sowie für die Größe die Werte von 1-12.
Solltest du noch keine oder wenig Erfahrung im Umgang mit Grid Layout haben, dann empfehle ich dir https://gridbyexample.com/ von Rachel Andrew.
Beispiele
Nachfolgend findest du ein paar Beispiel, um die grundsätzliche Funktionsweise von CSS Grid Layout besser zu verstehen:
Unterschiedliche Breiten bei unterschiedlichen Viewports
Verkleinere den Bildschirm oder verwende im Browser mit Bildschirmgröße testen, um zu sehen wie sich die Spalten verhalten.
In der linken Ecke wird angezeigt, in welchem Viewport das SpaltenSet anspricht.
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3
.col-sm-6 .col-md-4
.col-sm-6 .col-md-4
.col-sm-6 .col-md-4
Abstand zwischen zwei Spalten erzeugen
.col-md-5
.col-md-6 .col-start-md-7