Grid-Layout
Das Grid-Layout ist eine Technik zur Anordnung von Elementen auf einer Webseite. Dabei werden die Elemente entlang eines gedachten Gitternetzes (engl. grid) ausgerichtet. Um das Grid-Layout umzusetzen, werden HTML und CSS verwendet.
Die Idee ist, ein HTML-Element als Container für das Grid-Layout zu kennzeichnen und alle Elemente, die an diesem Gitter ausgerichtet werden sollen, dort hinein zu platzieren. Wo genau die Elemente platziert werden sollen, wird dann in CSS festgelegt.
Was in HTML zu tun ist
Im <body> der Webseite wird ein <div>-Element angelegt und diesem eine class zugewiesen. In diesem <div>-Element, also zwischen seinem öffnenden <div>- und seinem schließenden </div>-Tag werden dann die einzelnen Abschnitte platziert, ebenfalls in <div>-Tags eingeschlossen. Für jeden Abschnitt wird eine eigene class festgesetzt.
Was in CSS zu tun ist
Für den Grid-Container muss festgelegt werden, dass in ihm alles am Gitter ausgerichtet wird. Dies bewirkt folgende Regel:
.grid-container {
display: grid;
}
Zusätzlich kann auf die Gestaltung des Gitters Einfluss genommen werden.
