Alle Eigenschaften dieses Abschnitts richten Elemente entlang der
Inline-Achse (horizontal) aus.
Je nach Eigenschaft wird entweder das gesamte Grid, alle Grid-Items oder
ein einzelnes Grid-Item ausgerichtet.
justify-content
Mit justify-content wird das gesamte Grid innerhalb des
Grid-Containers entlang der Inline-Achse ausgerichtet.
Die Eigenschaft wirkt nur, wenn entlang der Inline-Achse freier Platz
vorhanden ist. Ist das Grid bereits so breit wie der Container, ist
keine Änderung sichtbar.
Folgende Werte sind möglich:
-
normal – verwendet das normale
Ausrichtungsverhalten.
-
start – richtet das Grid am Beginn der
Inline-Achse aus.
-
end – richtet das Grid am Ende der
Inline-Achse aus.
-
center – zentriert das Grid entlang der
Inline-Achse.
-
space-between – verteilt den freien Platz
zwischen den Grid-Columns.
-
space-around – verteilt den freien Platz
um die Grid-Columns.
-
space-evenly – verteilt den freien Platz
gleichmäßig zwischen und neben den Grid-Columns.
Merke:
justify-content richtet das gesamte Grid innerhalb
des Grid-Containers aus. Die einzelnen Grid-Items werden dadurch
nicht innerhalb ihrer Grid-Areas ausgerichtet.
Beispiel-CSS
.wrapper20 {
display: grid;
gap: 2px;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
justify-content: space-evenly;
}
Beispiel-HTML
<div class="wrapper20">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
Beispiel-Ausgabe
Beispiel ausprobieren (w3schools)
Offizielle Dokumentation (MDN)
justify-items
Mit justify-items werden alle Grid-Items innerhalb ihrer
jeweiligen Grid-Area entlang der Inline-Achse ausgerichtet.
Die Eigenschaft wirkt nur, wenn die Grid-Areas breiter als ihre Inhalte
sind. Füllt ein Grid-Item seine Grid-Area bereits vollständig aus,
ist keine Änderung sichtbar.
Folgende Werte sind möglich:
-
normal – verwendet das normale
Ausrichtungsverhalten.
-
stretch – dehnt die Grid-Items entlang der
Inline-Achse aus (Standardwert).
-
start – richtet alle Grid-Items am Beginn der
Inline-Achse aus.
-
end – richtet alle Grid-Items am Ende der
Inline-Achse aus.
-
center – zentriert alle Grid-Items innerhalb
ihrer Grid-Areas.
Merke:
justify-items richtet alle Grid-Items innerhalb ihrer
jeweiligen Grid-Area aus. Die Position des gesamten Grids im
Grid-Container wird dadurch nicht verändert.
Beispiel-CSS
.wrapper21 {
gap: 2px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
justify-items: center;
}
Beispiel-HTML
<div class="wrapper21">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
Beispiel-Ausgabe
Beispiel ausprobieren (w3schools)
Offizielle Dokumentation (MDN)
justify-self
Mit justify-self wird ein einzelnes Grid-Item innerhalb
seiner Grid-Area entlang der Inline-Achse ausgerichtet.
Die Eigenschaft wirkt nur, wenn die Grid-Area breiter als das
Grid-Item ist. Füllt das Grid-Item seine Grid-Area vollständig aus,
ist keine Änderung sichtbar.
Folgende Werte sind möglich:
-
auto – übernimmt den Wert von
justify-items.
-
normal – verwendet das normale
Ausrichtungsverhalten.
-
stretch – dehnt das Grid-Item entlang der
Inline-Achse aus (Standardwert).
-
start – richtet das Grid-Item am Beginn der
Inline-Achse aus.
-
end – richtet das Grid-Item am Ende der
Inline-Achse aus.
-
center – zentriert das Grid-Item innerhalb
seiner Grid-Area.
Merke:
justify-self richtet nur ein einzelnes Grid-Item
innerhalb seiner Grid-Area aus. Alle anderen Grid-Items bleiben
unverändert.
Beispiel-CSS
.wrapper22 {
gap: 2px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
}
.wrapper22 .item:first-child {
justify-self: end;
}
Beispiel-HTML
<div class="wrapper22">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
Beispiel-Ausgabe
Beispiel ausprobieren (w3schools)
Offizielle Dokumentation (MDN)