Grid-Layout: Unterschied zwischen den Versionen

Aus KGS-Wiki
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
Das '''Grid-Layout''' ist eine Technik zur Anordnung von [[HTML-Element|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.
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 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.
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 <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 {{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 ==
Zeile 11: Zeile 13:
=== Der Grid-Container ===
=== Der Grid-Container ===
Für den Grid-Container ''muss'' festgelegt werden, dass in ihm alles am Gitter ausgerichtet wird. Dies bewirkt folgende [[CSS#Regeln|Regel]]:
Für den Grid-Container ''muss'' festgelegt werden, dass in ihm alles am Gitter ausgerichtet wird. Dies bewirkt folgende [[CSS#Regeln|Regel]]:
.grid-container {
<syntaxhighlight lang="css" line="1">
  display: grid;
.grid-container {
}
  display: grid;
Zusätzlich kann auf die Gestaltung des Gitters Einfluss genommen werden: Mit den Attributen <code>column-gap</code> und <code>row-gap</code> kann beispielsweise der Abstand zwischen zwei Spalten bzw. zwischen zwei Zeilen festgelegt werden. Mit <code>grid-template-rows</code> und <code>grid-template-columns</code> ''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.
}
</syntaxhighlight>
Zusätzlich kann auf die Gestaltung des Gitters Einfluss genommen werden: Mit den Attributen {{CSS|column-gap}} und {{CSS|row-gap}} kann beispielsweise der Abstand zwischen zwei Spalten bzw. zwischen zwei Zeilen festgelegt werden. Mit {{CSS|grid-template-rows}} und {{CSS|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:
Insgesamt könnten die CSS-Regeln für den Grid-Container dann so aussehen:
.grid-container {
<syntaxhighlight lang="css" line="1" start="5">
  display: grid;
.grid-container {
  column-gap: 20px;
  display: grid;
  row-gap: 20px;
  column-gap: 20px;
  grid-template-rows: 200px 200px 200px; /* drei Zeilen, jede 200px hoch */
  row-gap: 20px;
  grid-template-columns: 15% 50% 20% 15%;/* vier Spalten, 15, 50, 20 und 15 Prozent der Container-Breite */
  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 */
}
</syntaxhighlight>
 


=== Die einzelnen Elemente ===
=== Die einzelnen Elemente===
Für jedes Element muss festgelegt werden, an welcher Gitternetzlinie es beginnen und enden soll, sowohl waagerecht als auch senkrecht.
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 <code>grid-column-start</code>, <code>grid-column-end</code>, <code>grid-row-start</code> und <code>grid-row-end</code>. Für den Artikel übers Schlittenfahren im oben abgebildeten Screenshot würden z.B. folgende Regeln gelten:
Dafür gibt es die Attribute {{CSS|grid-column-start}}, {{CSS|grid-column-end}}, {{CSS|grid-row-start}} und {{CSS|grid-row-end}}. Für den Artikel übers Schlittenfahren im oben abgebildeten Screenshot würden z.B. folgende Regeln gelten:
.schlittenfahren {
<syntaxhighlight lang="css" line start="13">
  grid-column-start: 2;
.schlittenfahren {
  grid-column-end: 3;
  grid-column-start: 2;
  grid-row-start: 1;
  grid-column-end: 3;
  grid-row-end: 2;
  grid-row-start: 1;
}
  grid-row-end: 2;
Diese Regeln können auch als <code>grid-column: VON / BIS;</code> bzw. <code>grid-row: VON / BIS;</code> zusammengefasst werden, wobei die Start- und End-Gitterlinien mit einem Schrägstrich getrennt angegeben werden.
}
</syntaxhighlight>
Diese Regeln können auch als {{CSS|grid-column: VON / BIS;}} bzw. {{CSS|grid-row: VON / BIS;}} zusammengefasst werden, wobei die Start- und End-Gitterlinien mit einem Schrägstrich getrennt angegeben werden.
[[Kategorie:Web-Programmierung]]
[[Kategorie:Web-Programmierung]]
[[Kategorie:Gestaltung]]
[[Kategorie:Gestaltung]]


== Beispiel ==
==Beispiel==


Der folgende Code erzeugt vier Boxen mit breiten schwarzen Rahmen in zwei Zeilen:
Der folgende Code erzeugt vier Boxen mit breiten schwarzen Rahmen in zwei Zeilen:


<pre class="mw-collapsible">
<syntaxhighlight lang="html" line class="mw-collapsible">
  <html>
  <html>
   <head>
   <head>
Zeile 88: Zeile 97:
     </div>
     </div>
   </body>
   </body>
  </html></pre>
  </html></syntaxhighlight>


<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; display: grid; column-gap: 20px; row-gap: 20px; padding: 20px;"><syntaxhighlight lang="html" style="grid-column: 1 / 3; grid-row: 1 / 2;"><div class="grid-container"></syntaxhighlight>
   <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: 1 / 2; padding: 20px;"><syntaxhighlight lang="html"><div class="grid-element-top-left"></syntaxhighlight></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: 2 / 3; grid-column: 2 / 3; padding: 20px;"><syntaxhighlight lang="html"><div class="grid-element-top-right"></syntaxhighlight></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: 1 / 2; padding: 20px;"><syntaxhighlight lang="html"><div class="grid-element-bottom-left"></syntaxhighlight></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 style="border: 3px solid black; grid-row: 3 / 4; grid-column: 2 / 3; padding: 20px;"><syntaxhighlight lang="html"><div class="grid-element-bottom-right"></syntaxhighlight></div>
</div>
</div>

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.

Screenshot von kn-online.de. Dieser Teil der Seite ist im Grid-Layout gestaltet, die Gitterlinien sind hervorgehoben.

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">
Abgerufen von „https://wiki.kah.gs/index.php?title=Grid-Layout&oldid=6710“