Grid-Layout: Unterschied zwischen den Versionen
Sn (Diskussion | Beiträge) K (→Beispiel: syntaxhighlight) |
Sn (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
Das '''Grid-Layout''' ist eine Technik zur Anordnung von [[HTML-Element|Elementen]] auf einer [[Website]]. Dabei werden die Elemente entlang eines gedachten Gitternetzes (engl. ''grid'') ausgerichtet. Um das Grid-Layout umzusetzen, werden [[HTML]] und [[CSS]] verwendet. | Das '''Grid-Layout''' ist eine Technik zur Anordnung von [[HTML-Element|Elementen]] auf einer [[Website]]. 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 | Die Idee ist, ein HTML-Element als '''Grid-Container''' zu kennzeichnen und alle '''Grid-Elemente''', die an diesem Gitter ausgerichtet werden sollen, dort hinein zu platzieren. Wo genau die Elemente platziert werden sollen, wird dann in CSS festgelegt. | ||
[[Datei:Screenshot KN-Online GridLayout.png|mini|600x600px|Screenshot von kn-online.de. Dieser Teil der Seite ist im Grid-Layout gestaltet, die Gitterlinien sind hervorgehoben.]] | [[Datei:Screenshot KN-Online GridLayout.png|mini|600x600px|Screenshot von kn-online.de. Dieser Teil der Seite ist im Grid-Layout gestaltet, die Gitterlinien sind hervorgehoben.]] | ||
== Was in HTML zu tun ist == | == Was in HTML zu tun ist == | ||
Im {{HTML|<body>}} der Webseite wird ein {{HTML|<div>}}-Element angelegt und diesem eine {{HTML|class}} zugewiesen. | Im {{HTML|<body>}} der Webseite wird ein {{HTML|<div>}}-Element angelegt und diesem eine {{HTML|class}} zugewiesen. Dieses Element ist der Grind-Container und es bietet sich an, die {{HTML|class}} auch so oder so ähnlich zu nennen. | ||
In diesem Grid-Container, also zwischen seinem öffnenden {{HTML|<div>}}- und seinem schließenden {{HTML|</div>}}-Tag werden dann die einzelnen Grid-Elemente platziert, ebenfalls in {{HTML|<div>}}-Tags eingeschlossen. Für jedes Element wird eine eigene {{HTML|class}} festgesetzt. Auch hier ist es sinnvoll, die Klassen so zu benennen, dass die Funktion als Grid-Element deutlich wird. | |||
== Was in CSS zu tun ist == | == Was in CSS zu tun ist == | ||
Aktuelle Version vom 7. November 2024, 06:39 Uhr
Das Grid-Layout ist eine Technik zur Anordnung von Elementen auf einer Website. 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 Grid-Container zu kennzeichnen und alle Grid-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. Dieses Element ist der Grind-Container und es bietet sich an, die class auch so oder so ähnlich zu nennen.
In diesem Grid-Container, also zwischen seinem öffnenden <div>- und seinem schließenden </div>-Tag werden dann die einzelnen Grid-Elemente platziert, ebenfalls in <div>-Tags eingeschlossen. Für jedes Element wird eine eigene class festgesetzt. Auch hier ist es sinnvoll, die Klassen so zu benennen, dass die Funktion als Grid-Element deutlich wird.
Was in CSS zu tun ist
Der Grid-Container
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: Mit den Attributen column-gap und row-gap kann beispielsweise der Abstand zwischen zwei Spalten bzw. zwischen zwei Zeilen festgelegt werden. Mit grid-template-rows und grid-template-columns kann zusätzlich die Anzahl und Breite der Zwischenräume zwischen den Gitternetzlinien definiert werden. Wenn man diese Attribute nicht festlegt, werden die Zeilen und Spalten lückenlos aneinandergesetzt und die Anzahl, Höhe und Breite der Spalten und Zeilen automatisch aus den Definitionen der Grid-Elemente berechnet.
Insgesamt könnten die CSS-Regeln für den Grid-Container dann so aussehen:
.grid-container {
display: grid;
column-gap: 20px;
row-gap: 20px;
grid-template-rows: 200px 200px 200px; /* drei Zeilen, jede 200px hoch */
grid-template-columns: 15% 50% 20% 15%;/* vier Spalten, 15, 50, 20 und 15 Prozent der Container-Breite */
}
Die einzelnen Elemente
Für jedes Element muss festgelegt werden, an welcher Gitternetzlinie es beginnen und enden soll, sowohl waagerecht als auch senkrecht.
Dafür gibt es die Attribute grid-column-start, grid-column-end, grid-row-start und grid-row-end. Für den Artikel übers Schlittenfahren im oben abgebildeten Screenshot würden z.B. folgende Regeln gelten:
.schlittenfahren {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
Diese Regeln können auch als grid-column: VON / BIS; bzw. grid-row: VON / BIS; zusammengefasst werden, wobei die Start- und End-Gitterlinien mit einem Schrägstrich getrennt angegeben werden.
Beispiel
Der folgende Code erzeugt vier Boxen mit breiten schwarzen Rahmen in zwei Zeilen:
<html>
<head>
<style>
/* Regeln für die Rahmenlinien, damit man die Boxen sehen kann */
div {
border: 3px solid black;
padding: 20px;
}
.grid-container {
display: grid;
row-gap: 20px;
column-gap: 20px;
}
.grid-element-top-left {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.grid-element-top-right {
grid-row: 1 / 2;
grid-column: 2 / 3;
}
.grid-element-bottom-left {
grid-row: 2 / 3;
grid-column: 1 / 2;
}
.grid-element-bottom-right {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-element-top-left"></div>
<div class="grid-element-top-right"></div>
<div class="grid-element-bottom-left"></div>
<div class="grid-element-bottom-right"></div>
</div>
</body>
</html>
<div class="grid-container">
<div class="grid-element-top-left">
<div class="grid-element-top-right">
<div class="grid-element-bottom-left">
<div class="grid-element-bottom-right">
