Testen Sie Ihre Fähigkeiten: Grid
Ziel dieses Fähigkeitstests ist es, zu beurteilen, ob Sie verstehen, wie ein Grid und Grid-Elemente funktionieren. Sie werden an mehreren kleinen Aufgaben arbeiten, die verschiedene Elemente des gerade behandelten Materials verwenden.
Hinweis: Klicken Sie in den Codeblöcken unten auf "Play", um die Beispiele im MDN Playground zu bearbeiten. Sie können den Code auch kopieren (klicken Sie auf das Clipboard-Symbol) und in einen Online-Editor wie CodePen, JSFiddle oder Glitch einfügen. Wenn Sie nicht weiterkommen, können Sie sich über einen unserer Kommunikationskanäle an uns wenden.
Aufgabe 1
In dieser Aufgabe sollten Sie ein Grid erstellen, in dem sich die vier Kindelemente automatisch platzieren. 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 haben. Versuchen Sie danach, mehr Kind-Container innerhalb des Elternelements mit der Klasse grid hinzuzufügen und sehen Sie, wie sie sich standardmäßig verhalten.
Ihr Endergebnis sollte wie das unten stehende Bild aussehen:
Versuchen Sie, den Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
<div class="grid">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
.grid {
}
Klicken Sie hier, um die Lösung zu zeigen
Erstellen Sie ein Grid mit display: grid mit drei Spalten mit grid-template-columns und einem gap zwischen den Elementen:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
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:
Bonusfrage: Können Sie nun das erste Element oben anzeigen lassen, ohne die Reihenfolge der Elemente in der Quelle zu ändern?
Versuchen Sie, den Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
<div class="grid">
<div class="item1">One</div>
<div class="item2">Two</div>
</div>
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
gap: 10px;
}
.item1 {
}
.item2 {
}
Klicken Sie hier, um die Lösung zu zeigen
Es ist möglich, Elemente zu schichten, indem sie dieselben Grid-Zellen belegen.
Eine Möglichkeit ist, die folgenden Shorthands zu nutzen, jedoch wäre es korrekt, die langfristige Methode wie grid-row-start zu verwenden.
.item1 {
grid-column: 1 / 4;
grid-row: 1 / 3;
}
.item2 {
grid-column: 2 / 5;
grid-row: 2 / 4;
}
Für die Bonusfrage wäre eine Möglichkeit, dies zu erreichen, die Verwendung von order, die wir im Flexbox-Tutorial behandelt haben.
.item1 {
order: 1;
}
Eine weitere gültige Lösung ist die Verwendung von z-index:
.item1 {
z-index: 1;
}
Aufgabe 3
In dieser Aufgabe gibt es vier direkte Kinder in diesem Grid. Der Ausgangspunkt lässt sie per Autoplatzierung anzeigen. Verwenden Sie die Eigenschaften grid-area und grid-template-areas, um die Elemente wie im Bild unten gezeigt anzuordnen:
Versuchen Sie, den Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
<div class="grid">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
Klicken Sie hier, um die Lösung zu zeigen
Jeder Teil des Layouts benötigt einen Namen mithilfe der grid-area Eigenschaft und grid-template-areas, um sie anzuordnen. Mögliche Verwirrungspunkte wären, dass Sie nicht erkennen, dass Sie einen . setzen müssen, um eine Zelle leer zu lassen, oder dass Sie den Namen wiederholen müssen, um ein Element über mehr als einen Track zu spannen:
.grid {
display: grid;
gap: 20px;
grid-template-columns: 1fr 2fr;
grid-template-areas:
"aa aa"
"bb cc"
". dd";
}
.one {
grid-area: aa;
}
.two {
grid-area: bb;
}
.three {
grid-area: cc;
}
.four {
grid-area: dd;
}
Aufgabe 4
In dieser Aufgabe müssen Sie sowohl das Grid-Layout als auch Flexbox verwenden, um das Beispiel wie im unten stehenden Bild nachzubilden. 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 Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
<div class="container">
<div class="card">
<img
alt="a single red balloon"
src="https://mdn.github.io/shared-assets/images/examples/balloons1.jpg" />
<ul class="tags">
<li>balloon</li>
<li>red</li>
<li>sky</li>
<li>blue</li>
<li>Hot air balloon</li>
</ul>
</div>
<div class="card">
<img
alt="balloons over some houses"
src="https://mdn.github.io/shared-assets/images/examples/balloons2.jpg" />
<ul class="tags">
<li>balloons</li>
<li>houses</li>
<li>train</li>
<li>harborside</li>
</ul>
</div>
<div class="card">
<img
alt="close-up of balloons inflating"
src="https://mdn.github.io/shared-assets/images/examples/balloons3.jpg" />
<ul class="tags">
<li>balloons</li>
<li>inflating</li>
<li>green</li>
<li>blue</li>
</ul>
</div>
<div class="card">
<img
alt="a balloon in the sun"
src="https://mdn.github.io/shared-assets/images/examples/balloons4.jpg" />
<ul class="tags">
<li>balloon</li>
<li>sun</li>
<li>sky</li>
<li>summer</li>
<li>bright</li>
</ul>
</div>
</div>
.container {
}
.tags {
}
Klicken Sie hier, um die Lösung zu zeigen
Der Container muss ein Grid-Layout sein, da wir Ausrichtung in Reihen und Spalten haben - zweidimensional.
Das <ul> muss ein Flex-Container sein, da Tags (<li> Elemente) nicht in Spalten, sondern nur in Reihen ausgerichtet sind und sie sind mit der Ausrichtungseigenschaft justify-content auf center im Raum zentriert.
Sie könnten versuchen, Flexbox auf dem Container zu verwenden und die Karten mit Prozentwerten einzuschränken. Sie könnten auch versuchen, die Elemente in ein Grid-Layout zu machen; in diesem Fall beachten Sie, dass die Elemente nicht in zwei Dimensionen ausgerichtet sind, daher ist Flexbox nicht die beste Wahl.
.container {
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
}
.tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
}