# Aufgabe Responsive Grid

![](https://4156320524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MMu14VA5QCGUUq6RkR_%2Fuploads%2Fgit-blob-9f03ad484c03da5c92c68e83040780ff566848f6%2Fralph.png?alt=media)

Style nun die Grid-Aufgabe für Tablets und mobile Geräte.&#x20;

## Responsives Layout

### Tablet

1. Sobald für die `1100px` des Containers kein Platz mehr auf dem Bildschirm ist, soll der Container immer `100%` breit sein.
2. Die Subnavigation soll nun horizontal direkt unter die Haupt-Navigation rutschen.
3. Content und Sidebar bleiben zweispaltig.

### Handy

1. Wenn für die einzelnen Elemente nicht mehr mindestens `480px` Breite zur Verfügung stehen, sollen alle Elemente untereinander mit `100%` des Bildschirms angezeigt werden.
2. Die Punkte in der Hauptnavigation sollen nun vertikal gestapelt sein. Dafür braucht die Navigation nun im Grid etwas mehr Platz.

**Zusatzaufgabe:**

Die Sidebar kann ausgeblendet werden. Nutze dazu die `display`-Eigenschaft in CSS.
