🛠️Aufgabe Grid

Du weisst jetzt, wie man ein Layout mit CSS Grids definiert. Nutze dein Wissen um folgendes Layout in CSS nachzubauen.

Aufgabenstellung

Setze das unten dargestellte Layout mit einem CSS Grid um.

Erstelle dazu ein neues Verzeichnis grid-aufgabe mit den Dateien layout.html und styles.css.

In layout.html kannst du als Grundgerüst folgenden Code benutzen:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Meine Testseite</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>Header<header>
    <nav class="main-nav">Menü</nav>
    <nav class="sub-nav">Untermenü</nav>
    <main>Inhalt</main>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
  </body>
</html>

In die Datei styles.css kannst du als Starthilfe schon mal dies einfügen:

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}
.container {
    background-color: lightgrey;
    margin: 0 auto;
    max-width: 1100px;
    min-height: 100vh;

    /* Grid */
    display: grid;
    grid-template-columns: /* ... */;
    grid-template-rows:    /* ... */;
}

Im HTML-head solltest du noch das CSS verlinken.
Damit die Bereiche besser sichtbar sind, gib den Menüs, der Sidebar und dem Footer eine neue Hintergrundfarbe, z.B. darkgray.
Erstelle nun das Grid gemäss obiger Grafik.
Füge zwischen allen Spalten einen Abstand von 20px ein. Zeilen sollen keinen Abstand haben.

Danach kannst du noch folgende Fragen beantworten:

Was bewirkt body { margin: 0; }?
Was bedeutet .container { margin: 0 auto; } und was bewirkt es?
Was bedeutet min-height: 100vh und was bewirkt es?

PreviousAufgaben NextAufgabe Grid mit Navigation

Last updated 18 days ago

Was this helpful?