Testen Sie Ihre Fähigkeiten: Grid
Das Ziel dieses Fähigkeitstests ist es, zu überprüfen, ob Sie verstehen, wie ein Grid und Grid-Elemente funktionieren. Sie werden mehrere kleine Aufgaben durchgehen, die verschiedene Elemente des Materials verwenden, das Sie gerade behandelt haben.
Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.
Wenn Sie nicht weiterkommen, können Sie uns über einen unserer Kommunikationskanäle erreichen.
Aufgabe 1
In dieser Aufgabe sollen Sie ein Grid erstellen, in das sich die vier Kindelemente automatisch einfügen. Das Grid sollte drei Spalten haben, die den verfügbaren Platz gleichmäßig teilen, und einen Abstand von 20 Pixeln zwischen den Spalten- und Reihen-Tracks. Versuchen Sie danach, mehr Kindelemente innerhalb des übergeordneten Containers mit der Klasse grid hinzuzufügen, um zu sehen, wie sie sich standardmäßig verhalten.
Ihr Endergebnis sollte wie das untenstehende Bild aussehen:
Versuchen Sie, den untenstehenden Live-Code zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Aufgabe 2
In dieser Aufgabe haben wir bereits ein Grid definiert. Indem Sie die CSS-Regeln für die beiden Kindelemente bearbeiten, lassen Sie sie jeweils über mehrere Grid-Tracks spannen. Das zweite Element sollte das erste überlagern, wie im Bild unten gezeigt:
Versuchen Sie, den untenstehenden Live-Code zu aktualisieren, um das fertige Beispiel nachzubilden:
Zusätzliche Frage:
- Können Sie jetzt das erste Element oben anzeigen lassen, ohne die Reihenfolge der Elemente im Quellcode zu ändern?
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Aufgabe 3
In dieser Aufgabe gibt es vier direkte Kinder in diesem Grid. Der Ausgangspunkt zeigt sie mittels Auto-Platzierung an. Verwenden Sie die Eigenschaften grid-area und grid-template-areas, um die Elemente wie im Bild unten anzuzeigen:
Versuchen Sie, den untenstehenden Live-Code zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Aufgabe 4
In dieser Aufgabe müssen Sie sowohl das Grid-Layout als auch Flexbox verwenden, um das Beispiel wie im Bild unten zu erstellen. Der Abstand zwischen den Spalten- und Reihen-Tracks sollte 10px betragen. Sie müssen keine Änderungen am HTML vornehmen, um dies zu erreichen.
Versuchen Sie, den untenstehenden Live-Code zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.