Horizontale oder vertikale Ausrichtung

[Rolf B]

Hallo Jenny,

die Frage ist schwierig gestellt. Im Grid-Layout definierst Du ein Raster aus Zeilen und Spalten. Wenn Du den Kind-Elementen des Grid-Containers nichts weiteres sagst, werden sie so, wie Platz ist, ins Raster gesetzt. Du kannst für die Kind-Elemente aber auch eine Platzierung festlegen. Und Du kannst mit Media-Queries sowohl das Raster als auch die Platzierungsangaben verändern - was maximale Verwirrung stiften kann, wenn Du das nicht sorgfältig machst.

Für die Rasterbildung gibt es verschiedene Ansätze. Erst einmal musst Du für das Grid ein Zeilenmuster (row template) und ein Spaltenmuster (column template) festlegen. Dafür gibt es verschiedene Varianten.

(1) Ohne Verwendung von Benennungen

• Breiten und Höhen mit den grid-template-rows und grid-template-columns Eigenschaften festlegen
• Den jeweiligen Elementen zuweisen, wo sie beginnen und enden (grid-row-start, grid-row-end, grid-column-start, grid-column-end, grid-row, grid-column, grid-area)

(2) In den grid-template-Eigenschaften legt man die Breite bzw. Höhe der Spalten und Zeilen im Grid fest. Diese Spalten und Zeilen werden durch Linien begrenzt (die nicht angezeigt werden, es ist nur eine Vorstellung). Diese Linien kann man aber benennen. Und man kann dann bei einem Element angeben, es soll von Linie "hugo" bis Linie "otto" gehen.

(3) Man kann das Grid auch in benannte Bereiche aufteilen (grid-areas). Und bei einem Element kann man angeben, dass es in einem bestimmten Bereich platziert werden soll. Die grid-template Eigenschaft kombiniert alles: Namen, Spaltenbreiten und Zeilenhöhen.

Das ist alles sehr vielfältig, das erklärt sich nicht eben so in einem Posting. Bitte lies die Grid-Tutorials in unserem Wiki durch, oder auch anderswo.

Über CSS hast Du die Möglichkeit, all diese Deklarationen über Media-Queries flexibel zu gestalten. Du kannst eine "Standardaufteilung" machen, für schmale Viewports, und mit einer Mediaquery erreichen, dass ab einer Mindestbreite eine ganz andere Aufteilung gilt und die Elemente ganz anders verteilt werden.

In diesem Abschnitt des Grid-Tutorials in unserem Wiki findest Du Beispiele, wie man ein Grid-Template durch Mediaqueries umbaut. Du könntest auch in einem @media Block die grid-area Zuordnung eines Elements überschreiben.

Rolf