Mit position und float ist es möglich, einzelne Elemente in spezifischer Weise auf der Homepage anzuordnen und dadurch bestimmte Konnotationen zu erzeugen. Bei komplexeren Designs ist man mit diesen Methoden jedoch schnell ernüchtert. Deshalb sind HTML Grid Systeme für ein gutes Design komplexer Webseiten unerlässlich – und sind noch dazu ganz einfach zu erlernen!
Was ist ein HTML Grid System?
Ein HTML Grid System ist eine tabellarische Struktur von HTML Elementen, die Webdesignern dabei hilft, mehrere Elemente in geordneter Weise auf der Webseite zu positionieren. Damit können HTML Elemente wie Schaltflächen, Menüs, Anwendungen und Websites geordnet ausgerichtet und strukturiert werden. Deiner Kreativität sind somit keine Grenzen gesetzt!
Die meisten Grid Systeme basieren auf einem Grid von 12 Spalten, aber es gibt auch Systeme mit 6, 10 oder mehr Spalten. Diese Grid Systeme werden von HTML Entwicklern verwendet, um Struktur und Form zu Websites und Anwendungen hinzuzufügen. Grid Systeme können dabei helfen, ein bestimmtes Verhältnis zwischen den Elementen auf einer Seite beizubehalten und somit mehr Kontrolle über die Platzierung der Seitenelemente zu erhalten.
Kurze Anleitung zur Erstellung eines HTML Grid Systems
Benutzer können Grid Systeme auch verwenden, um die Benutzererfahrung zu verbessern und gleichzeitig Zeit und Kosten bei der Entwicklung zu sparen. Mit Grid Systemen können Entwickler Websites und Anwendungen insbesondere schnell entwickeln – und das meist ganz ohne viel Vorwissen!
Erster Schritt: Grid einrichten – Spalten
Ein HTML Grid kann man sich im Grunde genommen genauso wie eine Tabelle mit mehreren Spalten und Zeilen vorstellen, wobei die genaue Anzahl an Spalten und Zeilen selbst definiert wird.
.container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}In diesem Beispiel erstellen wir ein Grid von vier Spalten in einem übergeordneten Element. Im übergeordneten Element – auch Eltern-Element genannt – wird somit eine Tabelle von vier gleich großen Spalten angelegt. Es ist wichtig anzumerken, dass anstelle von Prozenten auch bestimmte Pixelwerte angegeben werden können.
Zweiter Schritt: Grid einrichten – Zeilen
.container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 250px 1fr 250px
}Nun fügen wir den vier Spalten drei Zeilen hinzu. Dabei haben die erste und dritte Zeile eine Höhe von 250px. Die zweite Zeile hat eine Höhe von 1fr, was für den übriggebliebenen Restplatz im Eltern-Element steht.
Dritter Schritt: Elemente im Grid einfügen
In die angelegte Tabelle werden nun die gewünschten Web-Elemente eingeordnet. Dabei orientiert man sich nicht an den Spalten und Zeilen, sondern an den Zwischenräumen.
p {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 2;
}In diesem Beispiel zieht sich das Element p über die gesamte erste Zeile hindurch. grid-column-start markiert hierbei den Startpunkt des Elements in der gewünschten Spalte, wohingegen grid-row-start den Startpunkt des Element in der jeweiligen Zeile darstellt. Auf diese Weise werden alle Elemente wie gewünscht im Grid eingefügt. Um diesen Prozess zu vereinfachen gibt es die folgende verkürzte Schreibweise.
p {
grid-column: 1 / 5;
grid-row: 1 / 2;
}Vierter Schritt: Abstände zwischen den Zellen
Es ist möglich, Zwischenräume zwischen den einzelnen Zellen einzufügen und somit eine noch übersichtlichere Webseite zu gestalten.
.container {
grid-row-gap: 20px;
grid-column-gap: 10px;
}In diesem Fall haben die Zeilenlinien eine Höhe von 20px und die Spaltenlinien eine Höhe von 10px. Sollte man sich für Zeilenabstände entscheiden, sollten die Zellen allgemein kleiner gehalten werden, da sie sich mit 25% pro Spalte bereits über den gesamten Bildschirm erstrecken.
HTML Grid zusammengefasst
HTML Grid wird hauptsächlich zur Positionierung von Elementen genutzt. Es kann aber auch für andere gestalterische Aufgaben wie die Anordnung von Texten, Farben, Hintergründen und mehr verwendet werden. Aufgrund seiner Modularität lässt sich ein Grid problemlos an bestehende Layouts anpassen und somit ein einheitlicheres und ästhetischeres Endergebnis der jeweiligen Webseite erzielen. Aufgrund der einfachen Verwendungsmöglichkeiten von HTML Grid ist es hervorragend von Anfängern zu erlernen und umzusetzen – und hat eine große Wirkung!
Alles was Du über HTML Grid wissen solltest
Was ist HTML Grid?
Grid ist ein systematisch angeordnetes Raster, das entwickelt wurde, um die Struktur der Webseite zu organisieren und den Designprozess zu vereinfachen. Es ist ein wesentlicher Bestandteil im Entwurf und Bau jeder Website.
Wie funktioniert Grid?
Grid hilft dem Designer, Elemente im voraus geplanten Layout anzuordnen, wodurch ein ansprechendes Design ermöglicht wird. Grid stellt Widgets, die für den Aufbau des Layout Designs verwendet werden, zur Verfügung und gibt dem Designer die Freiheit, auf komplexe Weise verschiedene Teile des Layouts zu bearbeiten.
Was bedeutet Display Grid?
Display Grid ist ein CSS Layout System, das entwickelt wurde, um die schnelle und einfache Erstellung von Webdesigns und anderen Arten von Layouts zu ermöglichen. Es kann alle beliebigen Elemente eines Layouts auf ein Raster aus Gitterzeilen und Gitterspalten strukturieren und damit den Prozess des Webdesigns maßgeblich vereinfachen.