css-grid

Standardmäßig nehmen Elemente innerhalb einer Container-Spalte nur so viel Höhe ein, wie sie auch gewöhnlich, außerhalb eines Containers, benötigen (Salonhängung).

Um eine gleichmäßige Darstellung zu erreichen, muss am Container-Element die Funktion CSS Grid aktiviert werden (auch genannt: grid-general, Grid-Darstellung).

„Gleichmäßige Darstellung“ bedeutet genau gesagt: „Die Höhe aller Elemente derselben logischen Container-Zeile wird auf die Höhe des höchsten Elementes dieser Zeile ausgedehnt“.

CSS Grid wird für einen Container folgendermaßen aktiviert:

• Container identifizieren. Bei Seiten im Verbundenen Modus (heißt: englische Seitenelemente sind mit deutschen Elementen verknüpft) dafür den deutschen Container verwenden.
  • Anmerkung: Auch bei „english-only“-Seiten den deutschen Container verwenden, selbst wenn die deutsche Seitenversion effektiv nie zu sehen ist („english-only“-Seiten leiten ja automatisch von deutsch auf englisch weiter). Denn: Deutsch ist die Hauptsprache im GESIS-Web; Einstellungen an deutschen Content-Elementen wie CSS Grid und auch bspw. Sichtbarkeit vererben sich automatisch auf die verknüpften englische Versionen. Faustregel: „deutsche Einstellungen gewinnen über englischen Einstellungen“.
• Container editieren (Bleistift-Icon anklicken).
• Auf Registerkarte Erscheinungsbild wechseln.
• Unter Inhaltselement wrappen bei „Aktivieren?“ Haken setzen. Es erscheint das Dialogfenster „Aktualisierung erforderlich“. Mit Klick auf OK bestätigen. Die Editier-Seite lädt daraufhin neu.
• Nun wird ein weiterer Bereich „Klassen für das Inhaltselement wählen“ angezeigt.
  Hier im Bereich Verfügbare Objekte auf den Eintrag CSS Grid klicken. CSS Grid verschiebt sich dadurch in den Bereich Ausgewählte Objekte.
• Speichern anklicken.
• In der Backend-Seitenansicht erkennt man die Aktivierung der Funktion CSS Grid an einem Container anhand der Markierung „Klassen für das Inhaltselement wählen grid-general“ am Ende dieses Containers.
• Im Frontend werden nun alle Content-Elemente innerhalb des Containers gleichmäßig dargestellt.