CSS - justify-items Eigenschaft

Hallo, ambitionierte Web-Entwickler! Heute tauchen wir in die wunderbare Welt von CSS ein und erkunden eine Eigenschaft, die Ihre Layouts aussehen lassen kann, als wären sie von einem geübten Profi gestaltet worden. Ich spreche von der justify-items Eigenschaft. Vertrauen Sie mir, am Ende dieses Tutorials werden Sie Gegenstände so ausrichten können, wie ein Supreme Court Richter! ?

Was ist justify-items?

Bevor wir ins Detail gehen, lassen Sie uns verstehen, was justify-items macht. Stellen Sie sich vor, Sie haben einen Rasterbehälter, der mit süßen kleinen Rasterelementen gefüllt ist. Die justify-items Eigenschaft ist wie eine magische Zauberstab, der es Ihnen ermöglicht, zu steuern, wie diese Elemente entlang der inline-Achse (normalerweise horizontal) in ihren Rasterbereichen ausgerichtet werden.

Syntax

Die grundlegende Syntax für justify-items ist relativ einfach:

.container {
justify-items: value;
}

Dabei kann value eine Vielzahl von Optionen sein, die wir gleich erkunden werden. Aber zuerst stellen wir ein einfaches Raster ein, mit dem wir spielen können:

<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(2, 100px);
grid-template-rows: repeat(2, 100px);
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}

.item {
background-color: #3498db;
color: white;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}

Das erstellt ein 2x2 Raster mit vier Elementen. Nun erkunden wir die verschiedenen Werte, die wir mit justify-items verwenden können!

Mögliche Werte

Hier ist eine Tabelle aller möglichen Werte für justify-items:

Wert	Beschreibung
normal	Standardwert, verhält sich typischerweise wie stretch
stretch	Dehnt Elemente aus, um den Rasterbereich zu füllen
start	Ausrichtet Elemente an der Anfangsseite des Rasterbereichs
end	Ausrichtet Elemente an der Endseite des Rasterbereichs
center	Zentriert Elemente im Rasterbereich
flex-start	Ausrichtet Elemente an der Anfangsseite (für Flex-Container)
flex-end	Ausrichtet Elemente an der Endseite (für Flex-Container)
self-start	Ausrichtet Elemente an ihrer eigenen Anfangsseite
self-end	Ausrichtet Elemente an ihrer eigenen Endseite
left	Ausrichtet Elemente links
right	Ausrichtet Elemente rechts
baseline	Ausrichtet Elemente entlang ihrer Grundlinie
last baseline	Ausrichtet Elemente entlang ihrer letzten Grundlinie
safe center	Zentriert Elemente sicher (verhindert Datenverlust)
legacy right	Rechtsausrichtung (Legacysupport)

Nunzerlegen wir diese mit Beispielen!

CSS justify-items - normal Wert

.grid-container {
justify-items: normal;
}

Der normal Wert ist der Standard. In den meisten Fällen verhält er sich wie stretch. Es ist, als würde man seinen Rasterelementen sagen: "Sei einfach du selbst!"

CSS justify-items - stretch Wert

.grid-container {
justify-items: stretch;
}

Mit stretch werden Ihre Elemente ausgedehnt, um den gesamten Breitengrad ihres Rasterbereichs zu füllen. Es ist, als würde man seinen Elementen sagen, sie sollen tief durchatmen und sich ausdehnen!

CSS justify-items - start Wert

.grid-container {
justify-items: start;
}

Der start Wert richtet Ihre Elemente an der Anfangsseite ihres Rasterbereichs aus. Man könnte es sich vorstellen, als würden die Elemente an der Startlinie eines Rennens aufgereiht sein.

CSS justify-items - end Wert

.grid-container {
justify-items: end;
}

Im Gegensatz dazu drückt end Ihre Elemente an die Endseite ihres Rasterbereichs. Es ist, als würden die Elemente versucht sein, die Ziellinie zu berühren!

CSS justify-items - center Wert

.grid-container {
justify-items: center;
}

center tut exactly das, was man erwarten würde – es zentriert Ihre Elemente in ihrem Rasterbereich. Es ist perfekt, um ein ausgewogenes, meditativen Layout zu schaffen.

CSS justify-items - flex-start und flex-end Werte

.grid-container {
justify-items: flex-start;
}

.grid-container {
justify-items: flex-end;
}

Diese Werte sind ähnlich zu start und end, aber sie sind speziell für Flex-Container. Sie sind wie die coolen Cousins von start und end, die nur zu Flex-Partys kommen.

CSS justify-items - self-start und self-end Werte

.grid-container {
justify-items: self-start;
}

.grid-container {
justify-items: self-end;
}

Diese Werte richten Elemente an ihrer eigenen Anfangs- oder Endseite aus, die in einigen Schreibmodi von der Anfangs- oder Endseite des Containers abweichen kann. Es ist, als würde man jedem Element erlauben, zu entscheiden, auf welcher Seite des Bettes es schlafen möchte!

CSS justify-items - left und right Werte

.grid-container {
justify-items: left;
}

.grid-container {
justify-items: right;
}

Diese Werte tun genau das, was auf der Dose steht – sie richten Elemente links oder rechts aus. Einfach und unkompliziert, wie ein guter Kaffee am Morgen.

CSS justify-items - baseline und last baseline Werte

.grid-container {
justify-items: baseline;
}

.grid-container {
justify-items: last baseline;
}

Diese Werte richten Elemente entlang ihrer Grundlinie oder ihrer letzten Grundlinie aus. Es ist besonders nützlich, wenn Sie Text verschiedener Größen haben und diese schön ausrichten möchten.

CSS justify-items - safe center Wert

.grid-container {
justify-items: safe center;
}

Dieser Wert zentriert Elemente, stellt aber sicher, dass kein Datenverlust auftritt. Es ist, als hätte man ein Sicherheitsnetz für die zentrierten Elemente!

CSS justify-items - legacy right Wert

.grid-container {
justify-items: legacy right;
}

Dieser Wert ist für Abwärtskompatibilität. Es ist so, als würde man ein altes Klapphandy behalten – man wird es wahrscheinlich nicht verwenden, aber es ist da, falls man es braucht!

Und da haben Sie es, Leute! Sie haben gerade eine rasante Tour durch die justify-items Eigenschaft gemacht. Erinnern Sie sich daran, der Schlüssel zum Beherrschen von CSS ist die Übung. Also gehen Sie los, experimentieren Sie mit diesen Werten und erstellen Sie einige wunderschön ausgerichtete Layouts. Vor Ihnen wissen Sie es, Sie werden Gegenstände im Schlaf ausrichten können!

Fröhliches Coden, und mögen Ihre Gitter immer perfekt ausgerichtet sein! ??‍??‍?

Credits: Image by storyset