Grid System

Synonyme: Raster, Layout-System
Ähnliche Komponenten: /

Kurzbeschreibung

Das KERN Grid-System ist ein leichtgewichtiges, „Mobile First“ CSS-Framework, das auf dem Bootstrap Grid basiert und eine einfache Möglichkeit bietet, responsive, konsistente Layouts mit Containern, Zeilen und Spalten zu erstellen.

infoInfo

Weitere Informationen für Designer:innen zum Layout sind in der Layout Dokumentation zu finden.

Beschreibung

Grundlegender Aufbau

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

Bestandteile

Das KERN Grid-System besteht aus den folgenden grundlegenden Bestandteilen:

Container (kern-container)

Der Container ist der äußere Bereich, der das gesamte Grid umschließt und den Inhalt zentriert. Er sorgt dafür, dass das Layout innerhalb der maximalen Breite des Viewports bleibt und sich bei kleineren Bildschirmen anpasst. Der Standard Container kern-container ist ein responsiver Container mit fester Breite, d.h. seine maximale Breite ändert sich an jedem Breakpoint. Für Container, die sich über die gesamte Breite des Ansichtsfensters erstrecken sollen, verwende kern-container-fluid.

Zeilen (kern-row)

Zeilen sind horizontale Container, die die Spalten gruppieren. Jede Zeile enthält eine oder mehrere Spalten und sorgt dafür, dass der Inhalt korrekt ausgerichtet wird, ohne die Struktur des Grids zu verlassen. Sie enthalten ein negatives Margin, um das Padding der äußeren Spalten zu entfernen und so den richtigen Abstand zwischen den Spalten zu gewährleisten.
Technisch gesehen fungieren die Zeilen als CSS-Flexbox-Wrapper, wodurch sich die Spalten über Flexbox-Hilfsklassen ausrichten lassen.

Spalten (kern-col)

Spalten sind die vertikalen Container innerhalb einer Zeile, die den Platz für den Inhalt definieren. Spalten ermöglichen die flexible Anordnung von Inhalten in einem Raster.

infoHinweis

Hinweis: Wir präfixen alle Klassen mit 'kern-, damit keine Kollisionen zu bestehenden Grid-Systemen entstehen!

Container & Rows

• .kern-container: Zentrierter Container mit maximaler Breite (responsiv).
• .kern-container-fluid: Container mit 100% Breite.
• .kern-row: Reihe für Spalten.

Columns (Spalten)

Schema: .kern-col-{breakpoint}-{size}

• Size: 1 bis 12 (Anzahl der Spalten).
• Breakpoints:
  • (kein Suffix): ab 0px
  • sm: ab 576px
  • md: ab 768px
  • lg: ab 992px
  • xl: ab 1200px
  • xxl: ab 1600px

Verwendungsregeln

Erstellen von Spalten

Um Spalten zu erstellen, verwende Klassen wie kern-col-*, wobei das Sternchen für die Breakpoint-spezifische Breite steht. Zum Beispiel bestimmt die Klasse <div class="kern-col-md-4"></div>, dass die Spalte bei einem Bildschirm von mindestens 768px eine Breite von 4 von insgesamt 12 verfügbaren Spalten einnimmt.

Responsive Spalten

Um die Breite einer Spalte für verschiedene Bildschirmgrößen zu definieren, verwende die entsprechenden Breakpoint-Klassen:

• kern-col-* für kleinere Bildschirme (bis 576px),
• kern-col-sm-* für mittlere Bildschirme (ab 576px),
• kern-col-md-* für Tablets und mittlere Geräte (ab 768px),
• kern-col-lg-* für größere Geräte (ab 992px),
• kern-col-xl-* für noch größere Bildschirme (ab 1200px),
• kern-col-xxl-* für sehr große Bildschirme (ab 1600px).

Um eine Spalte hinzuzufügen, die nicht von einem Breakpoint abhängig ist, ignorierst du einfach den Breakpoint in der Klassenzusammenstellung.

Code anzeigen

<div class="kern-container">
    <div class="kern-col-md-9 kern-col-lg-4">
      <div class="kern-form-input">
        <label class="kern-label" for="text">Name</label>
        <input class="kern-form-input__input" id="text" name="text" type="text">
      </div>
    </div>
  </div>

Spaltenversatz (Offset)

Um einer Spalte einen Versatz hinzuzufügen, verwendest du die Klasse kern-col-, gefolgt vom Breakpoint, -offset- und der Anzahl der Spalten, die übersprungen werden sollen. Das folgende Beispiel verschiebt die Spalte um 3 Spalten, sodass sie erst nach einer Lücke von 3 Spalten beginnt.

Code anzeigen

<div class="kern-container">
  <div class="kern-row">
    <div class="kern-col-12 kern-col-md-9 kern-col-md-offset-3">
      <div class="kern-form-input">
        <label class="kern-label" for="text">Name</label>
        <input class="kern-form-input__input" id="text" name="text" type="text">
      </div>
    </div>
  </div>
  </div>

Ausrichtung der Spalten

Vertikale Ausrichtung

Diese Klassen werden dem .kern-row Element hinzugefügt und steuern die vertikale Ausrichtung der Spalten innerhalb der Reihe: .kern-align-items-start: Richtet die Spalten am oberen Rand der Reihe aus. .kern-align-items-center: Zentriert die Spalten vertikal in der Reihe. .kern-align-items-end: Richtet die Spalten am unteren Rand der Reihe aus.

Horizonale Ausrichtung

Diese Klassen werden ebenfalls dem .kern-row Element hinzugefügt und steuern die horizontale Ausrichtung der Spalten innerhalb der Reihe:

• .kern-justify-content-start: Richtet die Spalten am linken Rand der Reihe aus (Standardverhalten).
• .kern-justify-content-center: Zentriert die Spalten horizontal in der Reihe.
• .kern-justify-content-end: Richtet die Spalten am rechten Rand der Reihe aus.
• .kern-justify-content-around: Verteilt die Spalten gleichmäßig mit gleichem Abstand um jede Spalte.
• .kern-justify-content-between: Verteilt die Spalten gleichmäßig mit maximalem Abstand zwischen den Spalten (kein Abstand am Anfang und Ende).
• .kern-justify-content-evenly: Verteilt die Spalten gleichmäßig mit gleichem Abstand zwischen und um jede Spalte.

Code anzeigen

<div class="kern-container">
<div class="kern-row kern-justify-content-start" style="min-height: 6rem;">
  <div class="kern-col-3">
    <div class="kern-form-input">
      <label class="kern-label" for="text">Name</label>
      <input class="kern-form-input__input" id="text" name="text" type="text">
    </div>
  </div>
  <div class="kern-col-3">
    <div class="kern-form-input">
      <label class="kern-label" for="vorname">Vorname</label>
      <input class="kern-form-input__input" id="vorname" name="vorname" type="text">
    </div>
  </div>
</div>

<div class="kern-row kern-justify-content-center" style="min-height: 6rem;">
  <div class="kern-col-3">
    <div class="kern-form-input">
      <label class="kern-label" for="text">Name</label>
      <input class="kern-form-input__input" id="text" name="text" type="text">
    </div>
  </div>
  <div class="kern-col-3">
    <div class="kern-form-input">
      <label class="kern-label" for="vorname">Vorname</label>
      <input class="kern-form-input__input" id="vorname" name="vorname" type="text">
    </div>
  </div>
</div>

<div class="kern-row kern-justify-content-end" style="min-height: 6rem;">
  <div class="kern-col-3">
    <div class="kern-form-input">
      <label class="kern-label" for="text">Name</label>
      <input class="kern-form-input__input" id="text" name="text" type="text">
    </div>
  </div>
  <div class="kern-col-3">
    <div class="kern-form-input">
      <label class="kern-label" for="vorname">Vorname</label>
      <input class="kern-form-input__input" id="vorname" name="vorname" type="text">
    </div>
  </div>
</div>

<div class="kern-row kern-justify-content-around" style="min-height: 6rem;">
  <div class="kern-col-3">
    <div class="kern-form-input">
      <label class="kern-label" for="text">Name</label>
      <input class="kern-form-input__input" id="text" name="text" type="text">
    </div>
  </div>
  <div class="kern-col-3">
    <div class="kern-form-input">
      <label class="kern-label" for="vorname">Vorname</label>
      <input class="kern-form-input__input" id="vorname" name="vorname" type="text">
    </div>
  </div>
</div>

<div class="kern-row kern-justify-content-between" style="min-height: 6rem;">
  <div class="kern-col-3">
    <div class="kern-form-input">
      <label class="kern-label" for="text">Name</label>
      <input class="kern-form-input__input" id="text" name="text" type="text">
    </div>
  </div>
  <div class="kern-col-3">
    <div class="kern-form-input">
      <label class="kern-label" for="vorname">Vorname</label>
      <input class="kern-form-input__input" id="vorname" name="vorname" type="text">
    </div>
  </div>
</div>

<div class="kern-row kern-justify-content-evenly" style="min-height: 6rem;">
  <div class="kern-col-3">
    <div class="kern-form-input">
      <label class="kern-label" for="text">Name</label>
      <input class="kern-form-input__input" id="text" name="text" type="text">
    </div>
  </div>
  <div class="kern-col-3">
    <div class="kern-form-input">
      <label class="kern-label" for="vorname">Vorname</label>
      <input class="kern-form-input__input" id="vorname" name="vorname" type="text">
    </div>
  </div>
</div>
</div>

Selbstausrichtung

Diese Klassen kannst du einzelnen .kern-col-* Elementen hinzufügen, um ihre vertikale Ausrichtung innerhalb der Reihe zu überschreiben:

• .kern-align-items-start Richtet die Spalten am oberen Rand der Reihe aus.

  Code anzeigen

  <div class="kern-container">
  		<div class="kern-row kern-align-items-start" style="min-height: 12rem; background-color: var(--kern-neutral-bright-100);">
  			<div class="kern-col-4">
  				<div class="kern-form-input">
  					<label class="kern-label" for="text">Name</label>
  					<input class="kern-form-input__input" id="text" name="text" type="text">
  				</div>
  			</div>
  			<div class="kern-col-4">
  				<div class="kern-form-input">
  					<label class="kern-label" for="vorname">Vorname</label>
  					<input class="kern-form-input__input" id="vorname" name="vorname" type="text">
  				</div>
  			</div>
  			<div class="kern-col-4">
  				<div class="kern-form-input">
  					<label class="kern-label" for="alter">Alter</label>
  					<input class="kern-form-input__input" id="alter" name="alter" type="text">
  				</div>
  			</div>
  		</div>
  	</div>

• .kern-align-items-center Richtet die Spalten vertikal in der Mitte der Reihe aus.

  Code anzeigen

  <div class="kern-container">
  		<div class="kern-row kern-align-items-center" style="min-height: 12rem; background-color: var(--kern-neutral-bright-100);">
  			<div class="kern-col-4">
  				<div class="kern-form-input">
  					<label class="kern-label" for="text">Name</label>
  					<input class="kern-form-input__input" id="text" name="text" type="text">
  				</div>
  			</div>
  			<div class="kern-col-4">
  				<div class="kern-form-input">
  					<label class="kern-label" for="vorname">Vorname</label>
  					<input class="kern-form-input__input" id="vorname" name="vorname" type="text">
  				</div>
  			</div>
  			<div class="kern-col-4">
  				<div class="kern-form-input">
  					<label class="kern-label" for="alter">Alter</label>
  					<input class="kern-form-input__input" id="alter" name="alter" type="text">
  				</div>
  			</div>
  		</div>
  	</div>

• .kern-align-items-end Richtet die Spalten am unteren Rand der Reihe aus.

  Code anzeigen

  <div class="kern-container">
  		<div class="kern-row kern-align-items-end" style="min-height: 12rem; background-color: var(--kern-neutral-bright-100);">
  			<div class="kern-col-4">
  				<div class="kern-form-input">
  					<label class="kern-label" for="text">Name</label>
  					<input class="kern-form-input__input" id="text" name="text" type="text">
  				</div>
  			</div>
  			<div class="kern-col-4">
  				<div class="kern-form-input">
  					<label class="kern-label" for="vorname">Vorname</label>
  					<input class="kern-form-input__input" id="vorname" name="vorname" type="text">
  				</div>
  			</div>
  			<div class="kern-col-4">
  				<div class="kern-form-input">
  					<label class="kern-label" for="alter">Alter</label>
  					<input class="kern-form-input__input" id="alter" name="alter" type="text">
  				</div>
  			</div>
  		</div>
  	</div>

Dos and Don'ts

• Verwende Container, Zeilen und Spalten korrekt, um eine saubere und strukturierte Darstellung der Inhalte zu gewährleisten.
• Vermeide es, zu viele verschachtelte Container oder Zeilen zu verwenden – das macht das Layout schwerer wartbar.
• Nutze kern-col ohne Breitenangabe, wenn alle Spalten gleichmäßig verteilt sein sollen – das reduziert unnötige Komplexität.
• Kombiniere Breakpoints (z. B. kern-col-md-6 kern-col-lg-4), um Layouts für verschiedene Bildschirmgrößen gezielt anzupassen.
• Setze kern-container-fluid nur ein, wenn der Content tatsächlich über die gesamte Breite laufen soll – z. B. für Banner oder Hintergrundbereiche.
• Achte darauf, dass die Spalten in den verschiedenen Viewports eine optimale Lesbarkeit des Inhalts gewährleisten.