CSS-Grid verwenden für ein Layout in HTML
Grid-Raster:
Mit Gridlayouts erstellen Sie richtige Rasterlayouts. Wie sie CSS-Grid verwenden für ein Layout in HTML sehen Sie im nachfolgenden Beispiel. Das Layout ist zweispaltig, Kopf-und Fussbereich gehen über die ganze Breite. Der Inhalt ist rechts, ein weiterer Bereich die Navi befindet sich links davon.
Aufbau eines Layout mit Grid in HTML
| <!doctype html> |
| <html lang="de"> |
| <head> |
| <meta charset="utf-8"> |
| <title>Page</title> |
| <link rel="stylesheet" href="GridLayout.css"> |
| </head> |
| <body> |
| <header><h2>Das ist der Header</h2></header> |
| <nav><h2>navi</h2></nav> |
| <main><h2>Hier steht der Inhalt</h2></main> |
| <footer><h2>copyright © strassencoder.ch</h2></footer> |
| </body> |
| </html> |
Aufbau eines Layout mit Grid in CSS
Sie können bei der Rasterdefinition Bereiche im body(externe CSS-Datei) benennen:
| body { |
| display: grid; |
| grid-template-columns: 1fr 4fr ; |
| grid-template-rows: auto auto auto ; |
| grid-template-areas: |
| "header header " |
| "nav main " |
| "footer footer"; |
| } |
Nach der Definition der Bereiche müssen Sie die Elemente den Rasterbereichen zuweisen.
Dazu dient die Eigenschaft grid-area:
| header { |
| background: black; |
| color: white; |
| grid-area: header; |
| padding: 3rem; |
| } |
| nav { |
| background: dodgerblue; |
| color: black; |
| grid-area: nav; |
| padding: 3rem; |
| } |
| main { |
| background: grey; |
| color: black; |
| grid-area: main; |
| padding: 3rem; |
| } |
| footer { |
| background: black; |
| color: white; |
| grid-area: footer; |
| padding: 3rem; |
| } |
Layout mit Grid
