CSS-Grid-Layout
Zusätzlich zum Bootstrap-basierten Grid-Layout bietet das GESIS-Web-Frontend-Framework das CSS-Grid-Layout an. Es baut auf dem CSS-Standard CSS Grid Layout auf (display: grid
).
Das Alleinstellungsmerkmal des CSS-Grid-Layouts ist seine Fähigkeit, die Höhe aller Elementen einer logischen Grid-Reihe zu vereinheitlichen: alle Elemente einer logischen Grid-Reihe werden auf die Höhe des höchsten Elementes dieser Reihe "langezogen". Dadurch ergibt sich ein visuell harmonisches Raster-Erscheinungsbild.
Das CSS-Grid-Layout erfüllt lediglich ästhetische Zwecke; es kann und soll nicht inhaltliche Strukturierung erfüllen. Falls eine inhaltliche Struktur in tabellarischer Form vorliegt, ist stattdessen die Verwendung eines <table>
-HTML-Elementes angebracht: die von HTML-Tabellen aufbereitete Stuktur kann barrierefrei mit Screenreadern und erschlossen werden (siehe NVDA-Beispiel), und sie erlauben eine automatische strukturierte Erschließung durch Software, beispielsweise Webcrawler.
Ein CSS-Grid-Layout wird durch die CSS-Klasse grid-general
eingeleitet. Weitere CSS-Klassen wie beispielsweise frame-type-gesis-web-2col
bestimmen die Anzahl und Formatierung der Spalten. Das CSS-Grid-Layout nutzt vordefinierte Viewport-Breakpoints, ab deren Breitenunterschreitung das Layout automatisch die Spalten-Anordnung responsive anpasst.
Die nachfolgenden Beispiele zeigen alle zur Verfügung stehenden Layout-Variationen. Durch Verändern der Browserfenstergröße kann das responsive Layoutverhalten beobachtet werden.
CSS-Grid-Layout mit maximal zwei Spalten (gleichmäßig)
Umsetzung durch CSS-Klassen grid-general frame-type-gesis-web-2col
.
Live-Beispiel
HTML-Quelltext
<div class="grid-general frame-type-gesis-web-2col">
<div class="row g-gesis-2">
<div class="col">
<div class="gs_mouseover_box frame"> <span>CSS-Grid 2col. Erste Spalte, erstes Element. Auf kleinsten Bildschirmbreiten ist 2col einspaltig. Ab Bildschirmbreite "sm" wird 2col zweispaltig.</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 2col. Erste Spalte, zweites Element</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 2col. Erste Spalte, drittes Element</span> </div>
</div>
<div class="col">
<div class="gs_mouseover_box frame"> <span>CSS-Grid 2col. Zweite Spalte, erstes Element</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 2col. Zweite Spalte, zweites Element. Alle Elemente einer Reihe nehmen die Höhe des höchsten Elements dieser Reihe an.</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 2col. Zweite Spalte, drittes Element</span> </div>
</div>
</div>
</div>
CSS-Grid-Layout mit maximal zwei Spalten (Aufteilung ⅓ — ⅔)
Umsetzung durch CSS-Klassen grid-general frame-type-gesis-web-2col-1third2thirds
.
Live-Beispiel
HTML-Quelltext
<div class="grid-general frame-type-gesis-web-2col-1third2thirds">
<div class="row g-gesis-2">
<div class="col">
<div class="gs_mouseover_box frame"> <span>CSS-Grid 2col-1third2thirds. Erste Spalte, erstes Element. Auf kleinen Bildschirmbreiten ist 2col-1third2thirds einspaltig. Ab Bildschirmbreite "lg" wird 2col-1third2thirds zweispaltig.</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 2col-1third2thirds. Erste Spalte, zweites Element</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 2col-1third2thirds. Erste Spalte, drittes Element</span> </div>
</div>
<div class="col">
<div class="gs_mouseover_box frame"> <span>CSS-Grid 2col-1third2thirds. Zweite Spalte, erstes Element</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 2col-1third2thirds. Zweite Spalte, zweites Element. Alle Elemente einer Reihe nehmen die Höhe des höchsten Elements dieser Reihe an.</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 2col-1third2thirds. Zweite Spalte, drittes Element</span> </div>
</div>
</div>
</div>
CSS-Grid-Layout mit maximal drei Spalten (gleichmäßig)
Umsetzung durch CSS-Klassen grid-general frame-type-gesis-web-3col
.
Live-Beispiel
HTML-Quelltext
<div class="grid-general frame-type-gesis-web-3col">
<div class="row g-gesis-2">
<div class="col">
<div class="gs_mouseover_box frame"> <span>CSS-Grid 3col. Erste Spalte, erstes Element. Auf kleinsten Bildschirmbreiten ist 3col einspaltig. Ab Bildschirmbreite "md" wird 3col dreispaltig.</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 3col. Erste Spalte, zweites Element</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 3col. Erste Spalte, drittes Element</span> </div>
</div>
<div class="col">
<div class="gs_mouseover_box frame"> <span>CSS-Grid 3col. Zweite Spalte, erstes Element</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 3col. Zweite Spalte, zweites Element. Alle Elemente einer Reihe nehmen die Höhe des höchsten Elements dieser Reihe an.</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 3col. Zweite Spalte, drittes Element</span> </div>
</div>
<div class="col">
<div class="gs_mouseover_box frame"> <span>CSS-Grid 3col. Dritte Spalte, erstes Element</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 3col. Dritte Spalte, zweites Element</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 3col. Dritte Spalte, drittes Element</span> </div>
</div>
</div>
</div>
CSS-Grid-Layout mit maximal vier Spalten (gleichmäßig)
Umsetzung durch CSS-Klassen grid-general frame-type-gesis-web-4col
.
Live-Beispiel
HTML-Quelltext
<div class="grid-general frame-type-gesis-web-4col">
<div class="row g-gesis-2">
<div class="col">
<div class="gs_mouseover_box frame"> <span>CSS-Grid 4col. Erste Spalte, erstes Element. Auf kleinen Bildschirmbreiten ist 4col einspaltig. Ab Bildschirmbreite "sm" wird 4col zweispaltig und ab Bildschirmbreite "lg" vierspaltig.</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 4col. Erste Spalte, zweites Element</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 4col. Erste Spalte, drittes Element</span> </div>
</div>
<div class="col">
<div class="gs_mouseover_box frame"> <span>CSS-Grid 4col. Zweite Spalte, erstes Element</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 4col. Zweite Spalte, zweites Element. Alle Elemente einer Reihe nehmen die Höhe des höchsten Elements dieser Reihe an.</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 4col. Zweite Spalte, drittes Element</span> </div>
</div>
<div class="col">
<div class="gs_mouseover_box frame"> <span>CSS-Grid 4col. Dritte Spalte, erstes Element</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 4col. Dritte Spalte, zweites Element</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 4col. Dritte Spalte, drittes Element</span> </div>
</div>
<div class="col">
<div class="gs_mouseover_box frame"> <span>CSS-Grid 4col. Vierte Spalte, erstes Element</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 4col. Vierte Spalte, zweites Element</span> </div>
<div class="gs_mouseover_box frame"> <span>CSS-Grid 4col. Vierte Spalte, drittes Element</span> </div>
</div>
</div>
</div>