GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen

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

CSS-Grid 2col. Erste Spalte, erstes Element. Auf kleinsten Bildschirmbreiten ist 2col einspaltig. Ab Bildschirmbreite "sm" wird 2col zweispaltig.
CSS-Grid 2col. Erste Spalte, zweites Element
CSS-Grid 2col. Erste Spalte, drittes Element
CSS-Grid 2col. Zweite Spalte, erstes Element
CSS-Grid 2col. Zweite Spalte, zweites Element. Alle Elemente einer Reihe nehmen die Höhe des höchsten Elements dieser Reihe an.
CSS-Grid 2col. Zweite Spalte, drittes Element

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

CSS-Grid 2col-1third2thirds. Erste Spalte, erstes Element. Auf kleinen Bildschirmbreiten ist 2col-1third2thirds einspaltig. Ab Bildschirmbreite "lg" wird 2col-1third2thirds zweispaltig.
CSS-Grid 2col-1third2thirds. Erste Spalte, zweites Element
CSS-Grid 2col-1third2thirds. Erste Spalte, drittes Element
CSS-Grid 2col-1third2thirds. Zweite Spalte, erstes Element
CSS-Grid 2col-1third2thirds. Zweite Spalte, zweites Element. Alle Elemente einer Reihe nehmen die Höhe des höchsten Elements dieser Reihe an.
CSS-Grid 2col-1third2thirds. Zweite Spalte, drittes Element

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

CSS-Grid 3col. Erste Spalte, erstes Element. Auf kleinsten Bildschirmbreiten ist 3col einspaltig. Ab Bildschirmbreite "md" wird 3col dreispaltig.
CSS-Grid 3col. Erste Spalte, zweites Element
CSS-Grid 3col. Erste Spalte, drittes Element
CSS-Grid 3col. Zweite Spalte, erstes Element
CSS-Grid 3col. Zweite Spalte, zweites Element. Alle Elemente einer Reihe nehmen die Höhe des höchsten Elements dieser Reihe an.
CSS-Grid 3col. Zweite Spalte, drittes Element
CSS-Grid 3col. Dritte Spalte, erstes Element
CSS-Grid 3col. Dritte Spalte, zweites Element
CSS-Grid 3col. Dritte Spalte, drittes Element

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

CSS-Grid 4col. Erste Spalte, erstes Element. Auf kleinen Bildschirmbreiten ist 4col einspaltig. Ab Bildschirmbreite "sm" wird 4col zweispaltig und ab Bildschirmbreite "lg" vierspaltig.
CSS-Grid 4col. Erste Spalte, zweites Element
CSS-Grid 4col. Erste Spalte, drittes Element
CSS-Grid 4col. Zweite Spalte, erstes Element
CSS-Grid 4col. Zweite Spalte, zweites Element. Alle Elemente einer Reihe nehmen die Höhe des höchsten Elements dieser Reihe an.
CSS-Grid 4col. Zweite Spalte, drittes Element
CSS-Grid 4col. Dritte Spalte, erstes Element
CSS-Grid 4col. Dritte Spalte, zweites Element
CSS-Grid 4col. Dritte Spalte, drittes Element
CSS-Grid 4col. Vierte Spalte, erstes Element
CSS-Grid 4col. Vierte Spalte, zweites Element
CSS-Grid 4col. Vierte Spalte, drittes Element

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>