Zum Hauptinhalt springen

Grid

Synonyme: Raster, Layout-System\
Ähnliche Komponenten: Flexbox, Container

Hinweis

Die Komponente ist bereits einsatzbereit, jedoch fehlt noch etwas Dokumentation. Du kannst sie trotzdem schon verwenden – die Dokumentation wird in Kürze ergänzt.

Kurzbeschreibung​

Ein Grid-System ermöglicht die Erstellung von Layouts durch die Aufteilung des verfügbaren Platzes in Zeilen und Spalten. Es hilft dabei, Inhalte strukturiert und konsistent anzuordnen.

Beispiele​

Default Grid​

<div class="kern-container">
  <div class="kern-row">
    <div class="kern-col"></div>
  </div>
</div>

Container (kern-container)​

Container sind das grundlegendste Layoutelement des KERN-Grid-Systems. Obwohl Container verschachtelt werden können, erfordern die meisten Layouts keinen verschachtelten Container.

Standard Container​

Der Standard kern-container ist ein responsiver Container mit fester Breite, d. h. seine maximale Breite ändert sich an jedem Breakpoint.

Fluid Container​

Verwenden Sie kern-container-fluid für einen Container voller Breite, der sich über die gesamte Breite des Ansichtsfensters erstreckt.

Row (kern-row)​

Row sollten immer Spalten umbrechen. Die enthält einen negativen margin, um das padding aus den äußeren Spallte zu entfernen.

    <div class="kern-row">
      <!-- Columns -->
    </div>

Spalten (kern-col-*)​

Breakpoint-Spalten definieren die Breite der Spalte ab einem bestimmten Breakpoint.
Standardmäßig verfügt das Grig-System über die folgenden Breakpoints xs, sm, md, lg, xl und xxl.
Das entspricht dem Bootstrap 5 Breakpoints.

xs:  0,
sm:  576px,
md:  768px,
lg:  992px,
xl:  1200px,
xxl:  1400px

Das Rastersystem basiert auf einem 12 Spalten Raster.

Spalten erstellen​

Um eine Spalte zu konstruieren, verwenden Sie die Klasse kern-col-, gefolgt von einem Breakpoint und dann einer Breite (1 bis 12).

Beispiel.: <div class="kern-col-md-4"></div>

Dieses Beispiel erstellt eine Spalte mit einer Breite von 33,333 % (4/12) ab dem MD-Breakpoint.

Responsive Spalten​

Es ist möglich, in verschiedenen Breakpoint unterschiedliche Spaltenbreiten zu verwenden. Fügen Sie dazu einfach mehrere Spaltenklassen hinzu.

Beispiel.: <div class="kern-col-lg-4 kern-col-md-6"></div>

Spaltenversatz​

Um einer Spalte einen Versatz hinzuzufügen, verwenden Sie die Klasse „col-“, gefolgt vom Breakpoint, „-offset-“ und dann einer Breite (1 bis 12).

Beispiel.: <div class="col-lg-offset-2"></div>

Kein Breakpoint für Spalten verwenden​

Um eine Spalte hinzuzufügen, die nicht von einem Breakpoint abhängig ist, ignorieren Sie einfach den Breakpoint in der Klassenkonstruktion.

Beispiel.: <div class="col-6"></div>

Beschreibung​

Ein Grid-System ist ein Layout-Tool, das es ermöglicht, den verfügbaren Platz in Zeilen und Spalten aufzuteilen. Es hilft dabei, Inhalte strukturiert und konsistent anzuordnen und bietet eine flexible Möglichkeit, komplexe Layouts zu erstellen. Ein Grid-System besteht typischerweise aus Containern, Zeilen und Spalten, die zusammenarbeiten, um das Layout zu definieren. Das KERN-Grid-System basiert auf einem 12-Spalten-Raster und unterstützt verschiedene Breakpoints, um responsive Layouts zu erstellen.

Verwendungsregeln​

Verwende ein Grid-System, um Layouts zu erstellen, die aus mehreren Zeilen und Spalten bestehen. Stelle sicher, dass die Inhalte klar und prägnant angeordnet sind. Nutze das Grid-System, um eine konsistente Struktur und Ausrichtung der Inhalte zu gewährleisten. Verwende das Grid-System, um flexible und responsive Layouts zu erstellen, die sich an verschiedene Bildschirmgrößen anpassen. Achte darauf, dass Container, Zeilen und Spalten korrekt verwendet werden, um eine saubere und strukturierte Darstellung der Inhalte zu gewährleisten.

Dos und Don’ts​

Dos​

  • Verwende ein Grid-System, um Inhalte strukturiert und konsistent anzuordnen.
  • Stelle sicher, dass die Inhalte klar und prägnant angeordnet sind.
  • Nutze das Grid-System, um flexible und responsive Layouts zu erstellen.
  • Verwende das Grid-System, um eine konsistente Struktur und Ausrichtung der Inhalte zu gewährleisten.
  • Verwende Container, Zeilen und Spalten korrekt, um eine saubere und strukturierte Darstellung der Inhalte zu gewährleisten.

Don’ts​

  • Verwende kein Grid-System für unstrukturierte Inhalte.
  • Lasse die Inhalte nicht unklar oder unstrukturiert.
  • Vernachlässige nicht die Anpassung des Layouts an verschiedene Bildschirmgrößen.
  • Überlade das Grid-System nicht mit zu vielen Inhalten.
  • Verwende keine verschachtelten Container, es sei denn, es ist unbedingt erforderlich.

Barrierefreiheit​

Ein Grid-System sollte so gestaltet sein, dass es für alle Benutzer zugänglich ist. Achte darauf, dass die Inhalte innerhalb des Grids klar und prägnant sind und dass die Struktur des Grids für Screenreader und andere Hilfstechnologien zugänglich ist. Verwende aria-Attribute, um die Struktur und Beziehungen der Inhalte innerhalb des Grids zu beschreiben. Stelle sicher, dass das Grid-System auf verschiedenen Geräten und Bildschirmgrößen gut funktioniert und dass die Inhalte leicht zu lesen und zu navigieren sind.

Inhaltsverzeichnis