Testen Sie Ihre Fähigkeiten: CSS-Grids
Mit diesem Test können Sie überprüfen, ob Sie verstehen, wie sich ein Grid und seine Grid-Elemente verhalten. Dazu bearbeiten Sie mehrere kleine Aufgaben, die verschiedene Aspekte des gerade behandelten Materials aufgreifen.
Hinweis: Wenn Sie Hilfe benötigen, lesen Sie unseren Leitfaden zur Nutzung der Fähigkeitstests. Sie können uns auch über einen unserer Kommunikationskanäle erreichen.
CSS-Grids 1
In dieser Aufgabe sollen Sie ein Grid erstellen, in dem vier Kindelemente automatisch platziert werden. Das Grid soll drei Spalten haben, die sich den verfügbaren Platz gleichmäßig teilen. Der Abstand zwischen den Spalten und Zeilen soll 20px betragen. Fügen Sie anschließend weitere Kindelemente zum übergeordneten Container mit der Klasse grid hinzu und beobachten Sie, wie sie sich standardmäßig verhalten.
Der Ausgangspunkt der Aufgabe sieht so aus:
Dies ist der zugrunde liegende Code für diesen Ausgangspunkt:
<div class="grid">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.grid > * {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: white;
padding: 0.5em;
}
.grid {
/* Add styles here */
}
Das fertige Layout sollte so aussehen:
Klicken Sie hier, um die Lösung anzuzeigen
Erstellen Sie mit display: grid ein Grid mit drei Spalten, die Sie mit grid-template-columns definieren, und einem gap zwischen den Elementen:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
CSS-Grids 2
In dieser Aufgabe ist bereits ein Grid definiert. Bearbeiten Sie die CSS-Regeln für die beiden Kindelemente so, dass sich jedes über mehrere Grid-Tracks erstreckt. Das zweite Element soll das erste überlagern.
Zusatzfrage: Können Sie nun dafür sorgen, dass das erste Element im Vordergrund angezeigt wird, ohne die Reihenfolge der Elemente im Quellcode zu ändern?
Der Ausgangspunkt der Aufgabe sieht so aus:
Dies ist der zugrunde liegende Code für diesen Ausgangspunkt:
<div class="grid">
<div class="item1">One</div>
<div class="item2">Two</div>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.grid > * {
border-radius: 0.5em;
color: white;
padding: 0.5em;
}
.item1 {
background-color: rgb(74 102 112 / 70%);
border: 5px solid rgb(74 102 112 / 100%);
}
.item2 {
background-color: rgb(214 162 173 / 70%);
border: 5px solid rgb(214 162 173 / 100%);
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
gap: 10px;
}
.item1 {
/* Add styles here */
}
.item2 {
/* Add styles here */
}
Nach Abschluss der Aufgabe sollte das Layout so aussehen:
Klicken Sie hier, um die Lösung anzuzeigen
Mehrere Elemente können dieselben Grid-Zellen belegen und übereinanderliegen.
Eine Möglichkeit besteht darin, die folgenden Kurzschreibweisen zu verwenden. Sie könnten aber beispielsweise auch die Einzeleigenschaft grid-row-start verwenden.
.item1 {
grid-column: 1 / 4;
grid-row: 1 / 3;
}
.item2 {
grid-column: 2 / 5;
grid-row: 2 / 4;
}
Eine Möglichkeit, die Zusatzfrage zu lösen, bietet die Eigenschaft order, die Sie bereits im Flexbox-Tutorial kennengelernt haben.
.item1 {
order: 1;
}
Eine weitere gültige Lösung ist die Verwendung von z-index:
.item1 {
z-index: 1;
}
CSS-Grids 3
In dieser Aufgabe enthält das Grid vier direkte Kindelemente. Sie werden derzeit automatisch im Grid platziert.
Der Ausgangspunkt der Aufgabe sieht so aus:
Dies ist der zugrunde liegende Code für diesen Ausgangspunkt:
<div class="grid">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.grid > * {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: white;
padding: 0.5em;
}
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
Verwenden Sie die Eigenschaften grid-area und grid-template-areas, um die Elemente wie hier gezeigt anzuordnen:
Klicken Sie hier, um die Lösung anzuzeigen
Jeder Bereich des Layouts benötigt einen Namen, der mit der Eigenschaft grid-area festgelegt wird. Mit grid-template-areas ordnen Sie die Bereiche an. Beachten Sie dabei, dass Sie mit einem . eine Zelle leer lassen und einen Namen wiederholen müssen, damit sich ein Element über mehr als einen Track erstreckt:
.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;
}
CSS-Grids 4
In dieser Aufgabe müssen Sie sowohl Grid-Layout als auch Flexbox verwenden, um das fertige Layout nachzubilden. Der Abstand zwischen den Spalten und Zeilen soll 10px betragen. Dafür müssen Sie das HTML nicht ändern.
Der Ausgangspunkt der Aufgabe sieht so aus:
Dies ist der zugrunde liegende Code für diesen Ausgangspunkt:
<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>
body {
font: 1.2em / 1.5 sans-serif;
}
.card {
display: grid;
grid-template-rows: 200px min-content;
}
.card > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tags {
margin: 0;
padding: 0;
list-style: none;
}
.tags > * {
background-color: #999999;
color: white;
padding: 0.2em 0.8em;
border-radius: 0.2em;
font-size: 80%;
margin: 5px;
}
.container {
/* Add styles here */
}
.tags {
/* Add styles here */
}
Nach Abschluss der Aufgabe sollte das Layout so aussehen:
Klicken Sie hier, um die Lösung anzuzeigen
Der Container benötigt ein Grid-Layout, da die Karten in zwei Dimensionen ausgerichtet sind – in Zeilen und Spalten.
Das <ul> muss ein Flex-Container sein, da die Tags (<li>-Elemente) nur in einer Dimension – in Zeilen – angeordnet und innerhalb des verfügbaren Platzes zentriert werden. Dazu wird die Ausrichtungseigenschaft justify-content auf center gesetzt.
.container {
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
}
.tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
}