Grid-Layout: Unterschied zwischen den Versionen
Sn (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Sn (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 6: | Zeile 6: | ||
== Was in HTML zu tun ist == | == Was in HTML zu tun ist == | ||
Im <code><body></code> der Webseite wird ein <code><nowiki><div></nowiki></code>-Element angelegt und diesem eine <code>class</code> zugewiesen. In diesem <code><nowiki><div></nowiki></code>-Element, also zwischen seinem öffnenden <code><nowiki><div></nowiki></code>- und seinem schließenden <code><nowiki></div></nowiki></code>-Tag werden dann die einzelnen Abschnitte platziert, ebenfalls in <code><nowiki><div></nowiki></code>-Tags eingeschlossen. Für jeden Abschnitt wird eine eigene <code>class</code> festgesetzt. | Im <code><body></code> der Webseite wird ein <code><nowiki><div></nowiki></code>-Element angelegt und diesem eine <code>class</code> zugewiesen. In diesem <code><nowiki><div></nowiki></code>-Element, also zwischen seinem öffnenden <code><nowiki><div></nowiki></code>- und seinem schließenden <code><nowiki></div></nowiki></code>-Tag werden dann die einzelnen Abschnitte platziert, ebenfalls in <code><nowiki><div></nowiki></code>-Tags eingeschlossen. Für jeden Abschnitt wird eine eigene <code>class</code> festgesetzt. | ||
<div style="border: 3px solid black; display: grid; column-gap: 20px; row-gap: 20px; padding: 20px;"><pre style="grid-column: 1 / 3; grid-row: 1 / 2;"><div class="grid-container"></pre> | |||
<div style="border: 3px solid black; grid-row: 2 / 3; grid-column: 1 / 2; padding: 20px;"><pre><div class="grid-element-top-left"></pre></div> | |||
<div style="border: 3px solid black; grid-row: 2 / 3; grid-column: 2 / 3; padding: 20px;"><pre><div class="grid-element-top-right"></pre></div> | |||
<div style="border: 3px solid black; grid-row: 3 / 4; grid-column: 1 / 2; padding: 20px;"><pre><div class="grid-element-bottom-left"></pre></div> | |||
<div style="border: 3px solid black; grid-row: 3 / 4; grid-column: 2 / 3; padding: 20px;"><pre><div class="grid-element-bottom-right"></pre></div> | |||
</div> | |||
== Was in CSS zu tun ist == | == Was in CSS zu tun ist == | ||
Version vom 16. Dezember 2022, 11:01 Uhr
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.
<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">
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.
