CSS justify-items Eigenschaft
Die CSS-Eigenschaft justify-items legt die Standardausrichtung von Grid-Elementen entlang der Inline-Achse (Zeilenachse) fest. Alle Werte mit Live-Beispielen.
Die CSS-Eigenschaft justify-items legt die Standardausrichtung für jedes Element innerhalb eines Containers entlang der Inline-Achse (Zeilenachse) fest — in einer Links-nach-Rechts-Sprache entspricht das der horizontalen Richtung. Sie wird am Container gesetzt und wirkt als Standard-justify-self für alle seine Kindelemente gleichzeitig. Jedes einzelne Element kann diesen Standard weiterhin mit einem eigenen justify-self-Wert überschreiben.
In einem CSS Grid steuert justify-items, wo jedes Element horizontal innerhalb seiner eigenen Grid-Zelle positioniert wird — links, rechts, zentriert oder so gedehnt, dass es die Zelle ausfüllt. Die Begleiteigenschaft align-items bewirkt dasselbe entlang der Block-Achse (Spaltenachse), und die Kurzschreibweise place-items setzt beide in einer einzigen Deklaration.
Wann man sie verwendet
Greifen Sie auf justify-items zurück, wenn Sie ein Grid haben und möchten, dass alle Zellen dieselbe horizontale Ausrichtung teilen, ohne justify-self auf jedes Element zu schreiben. Typische Anwendungsfälle:
- Inhalte in jeder Grid-Zelle zentrieren (
center). - Zellen an den Anfangs- oder Endrand schieben (
start/end). - Elemente so dehnen, dass sie die volle Zellenbreite ausfüllen (
stretch, der Grid-Standard).
Hinweis:
justify-itemsgilt für Grid-Container und absolut positionierte Elemente. In Flexbox wird es ignoriert — verwenden Sie stattdessenjustify-content, um Flex-Elemente entlang der Hauptachse zu verteilen.
| Anfangswert | auto |
|---|---|
| Gilt für | Grid-Container und absolut positionierte Elemente. |
| Vererbung | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.justifyItems = "start"; |
Syntax
CSS justify-items Werte
justify-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first-baseline | last-baseline | stretch | safe | unsafe | legacy | initial | inherit;Beispiel: justify-items mit dem Wert "start"
CSS justify-items Code-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
justify-items: start;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>Ergebnis
Mit justify-items: start wird jedes Element an den linken Rand seiner Grid-Zelle gezogen. Ändern Sie den Wert auf center, end oder stretch (unten), um zu sehen, wie sich die Elemente innerhalb derselben Zellen bewegen.
Beispiel: justify-items mit dem Wert "center"
CSS justify-items center Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
justify-items: center;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>Beispiel: justify-items mit dem Wert "first-baseline"
Beispiel der justify-items Eigenschaft mit dem Wert "first-baseline":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.container {
display: grid;
padding-top: 10px;
height: 250px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
background: #ccc;
justify-items: first-baseline;
}
.item {
width: 50%;
height: 50%;
text-align: center;
}
.item1 {
background: red;
}
.item2 {
background: blue;
}
.item3 {
background: green;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div class="container">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
</body>
</html>Beispiel: justify-items mit dem Wert "self-end"
Beispiel der justify-items Eigenschaft mit dem Wert "self-end":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
justify-items: self-end;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| auto | Wenn das Element kein übergeordnetes Element hat oder absolut positioniert ist, entspricht auto dem Wert normal. |
| normal | Der Effekt hängt vom Layout-Modus ab: • Block-Layouts: verhält sich wie start. • Absolut positionierte Layouts: verhält sich wie start bei ersetzten Elementen und wie stretch bei anderen. • Tabellenzellen: wird ignoriert. • Flexbox: wird ignoriert. • Grid-Layouts: verhält sich wie stretch, außer bei Elementen mit einem Seitenverhältnis oder einer intrinsischen Größe, wo es sich wie start verhält. |
| start | Alle Elemente werden am Startrand (links) des Containers ausgerichtet. |
| end | Alle Elemente werden am Endrand (rechts) des Containers ausgerichtet. |
| flex-start | Elemente werden am Anfang des Containers platziert. |
| flex-end | Elemente werden am Ende des Containers platziert. |
| self-start | Das Element darf sich am Containerrand entsprechend seiner eigenen Startseite positionieren. |
| self-end | Das Element darf sich am Containerrand entsprechend seiner eigenen Endseite positionieren. |
| center | Elemente werden nebeneinander zur Mitte des Containers hin positioniert. |
| left | Elemente werden nebeneinander zur linken Seite des Containers platziert. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse ist, verhält sich dieser Wert wie end. |
| right | Elemente werden nebeneinander zur rechten Seite des Containers platziert. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse ist, verhält sich dieser Wert wie start. |
| baseline | Richtet alle Elemente innerhalb einer Gruppe durch Angleichung ihrer Ausrichtungsbasislinie aus. |
| first-baseline | Richtet alle Elemente innerhalb einer Gruppe durch Angleichung ihrer ersten Ausrichtungsbasislinie aus. |
| last-baseline | Richtet alle Elemente innerhalb einer Gruppe durch Angleichung ihrer letzten Ausrichtungsbasislinie aus. |
| stretch | Dehnt das Element, sodass es den Container entlang der Inline-/Hauptachse ausfüllt. |
| safe | Wenn die Größe des Elements den Ausrichtungscontainer überschreitet, wird das Element so ausgerichtet, als wäre der Ausrichtungsmodus start. |
| unsafe | Unabhängig von der Größe des Elements und dem Ausrichtungscontainer wird der Ausrichtungswert eingehalten. |
| legacy | Legacy-Schlüsselwort für Abwärtskompatibilität. Wird je nach Layout-Modus auf flex-start, flex-end oder center abgebildet. Hat keinen Einfluss auf die Vererbung. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
justify-items vs. justify-self
Diese zwei Eigenschaften sehen ähnlich aus, befinden sich aber auf unterschiedlichen Elementen:
justify-itemswird am Container gesetzt und legt eine standardmäßige horizontale Ausrichtung für alle seine Elemente fest.justify-selfwird an einem einzelnen Element gesetzt und überschreibt dasjustify-itemsdes Containers nur für dieses eine Element.
Ein gängiges Muster ist daher, mit justify-items am Grid einen Standard zu setzen und dann einzelne besondere Elemente mit justify-self anzupassen.
justify-items vs. align-items
justify-items und align-items wirken auf senkrechten Achsen:
justify-items→ Inline-Achse (Zeilenachse) — horizontale Positionierung in einem Links-nach-Rechts-Dokument.align-items→ Block-Achse (Spaltenachse) — vertikale Positionierung.
Um beide gleichzeitig zu setzen, verwenden Sie die Kurzschreibweise place-items: place-items: <align-items> <justify-items>.
Browser-Unterstützung
justify-items wird in allen modernen Browsern (Chrome, Edge, Firefox, Safari und Opera) als Teil des CSS Box Alignment-Moduls unterstützt. Der Hauptanwendungsfall — die Ausrichtung innerhalb von CSS Grid — wird ebenfalls breit unterstützt.