Ausrichten im Raster

Vier Eigenschaften richten im Raster etwas aus, und sie klingen alle ähnlich. Mit zwei Unterscheidungen wird daraus ein System.

01 / 04Die Systematik

• justify-* arbeitet waagerecht, entlang der Zeilen.
• align-* arbeitet senkrecht, entlang der Spalten.
• *-items richtet die Inhalte in ihren Zellen aus.
• *-content richtet das ganze Raster im Container aus.

Das ergibt vier Kombinationen, justify-items, align-items, justify-content und align-content, ohne Sonderfall.

Anders als bei Flexbox hängen die Achsen hier nicht an einer Richtung. Ein Raster hat immer Zeilen und Spalten. justify bleibt waagerecht, align bleibt senkrecht, und das ist eine Sorge weniger als in Abschnitt 9.

02 / 04items richtet die Kinder, content das Raster

<p class="titel">justify-items: center, jedes Kind in seiner Zelle</p>
<div class="raster items">
  <div class="zelle">1</div><div class="zelle">2</div><div class="zelle">3</div>
</div>

<p class="titel">justify-content: center, das ganze Raster im Container</p>
<div class="raster inhalt">
  <div class="zelle">1</div><div class="zelle">2</div><div class="zelle">3</div>
</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
}

.titel {
  margin-bottom: 4px;
  font-size: 14px;
  color: #52525b;
}

/* Die Spalten sind fest 80px breit und füllen den
   Container nicht aus. Nur dann sieht man den
   Unterschied: es bleibt Platz übrig, und die Frage
   ist, wo er landet. */
.raster {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 8px;
  margin-bottom: 24px;
  padding: 8px;
  background-color: #e4e4e7;
}

.zelle {
  padding: 16px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

/* Die Kinder schrumpfen auf ihren Inhalt und sitzen
   mittig in ihrer Zelle. Die Spalten selbst bleiben
   links. */
.items {
  justify-items: center;
}

/* Die Kinder füllen ihre Zellen weiter aus, aber der
   ganze Spaltenblock rückt in die Mitte. */
.inhalt {
  justify-content: center;
}

Den Unterschied zwischen -items und -content sieht man nur, wenn Platz übrig ist. Deshalb haben die Raster im Beispiel feste Spaltenbreiten von 80px und füllen den Container nicht aus.

Normalerweise füllt jedes Kind seine Zelle aus. Der Standardwert von justify-items heißt eigentlich legacy. Der Browser rechnet daraus normal, und bei Rasterkindern verhält sich normal wie stretch. Im Reiter „Werte“ steht an einem Raster deshalb normal und nicht stretch, gedehnt sind die Kästen trotzdem.

justify-items: center lässt die Spalten, wo sie sind, und schiebt die Kinder in die Mitte ihrer Zelle. Dabei schrumpfen sie auf ihren Inhalt.

justify-content: center lässt die Kinder ihre Zellen füllen und schiebt den ganzen Spaltenblock in die Mitte des Containers.

Im Streifen stehen alle vier untereinander, in derselben Ordnung wie oben. An den beiden Rastern des Beispiels unterscheiden sie sich in zwei Zeilen. Beim oberen stehen align-items: normal, justify-items: center, align-content: normal und justify-content: normal. Beim unteren stehen dieselben vier, nur mit justify-items: normal und justify-content: center. Die Spuren sind in beiden 80px 80px 80px, an ihnen hat sich also nichts verschoben. Einmal bewegen sich die Kinder in ihren Zellen, einmal die Zellen im Container.

Füllen deine Spuren den Container aus, etwa weil irgendwo ein 1fr steht, tut justify-content nichts. Dann ist einfach nichts übrig, was sich verteilen ließe. Bei Flexbox war das in 9.3 genauso.

03 / 04Die Ausnahme am Kind

<div class="raster">
  <div class="zelle">normal</div>
  <div class="zelle mitte">justify-self</div>
  <div class="zelle">normal</div>
  <div class="zelle hoch">align-self: start</div>
  <div class="zelle">ein Kasten mit mehr Text, der die Zeile höher macht</div>
  <div class="zelle">normal</div>
</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
  background-color: #e4e4e7;
}

.zelle {
  padding: 16px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

/* justify-self und align-self stehen am Kind und
   überstimmen die Vorgabe des Containers für genau
   dieses eine. */
.mitte {
  justify-self: center;
  background-color: #b91c1c;
}

.hoch {
  align-self: start;
  background-color: #15803d;
}

justify-self und align-self stehen am Kind und überstimmen die Vorgabe des Containers für genau dieses eine Kind. Das ist dieselbe Aufteilung wie bei Flexbox, eine Regel für alle und eine Ausnahme für einen.

Im Streifen stehen die beiden am Kind nicht, dort geht es um Werte des Containers. Messen kannst du sie trotzdem, denn sie ändern das Maß. Im Vollbild steht die Seite auf den 520 Pixeln, für die das Beispiel gebaut ist. Dort ist der Kasten mit justify-self: center rund 128 breit, und seine Nachbarn nehmen die vollen rund 157 ihrer Spur. Der Kasten mit align-self: start ist rund 80 hoch, in einer Zeile, die rund 104 hoch ist. Zwei Kästen, die aufhören, ihre Zelle auszufüllen. In der schmalen Spalte siehst du davon nichts. Die Spur ist dort zu eng, und der Kasten mit justify-self kann gar nicht schrumpfen, weil sein Text ohnehin nicht hineinpasst.

Typisch ist ein Raster aus Karten, in dem ein einzelnes Element ein Button ist, und der soll eben nicht über die volle Spaltenbreite gezogen werden wie alles andere um ihn herum.

04 / 04Zentrieren in zwei Zeilen

<p class="titel">ohne: der Kasten füllt das ganze Feld</p>
<div class="feld ohne">
  <div class="schild">mittig?</div>
</div>

<p class="titel">mit place-items: center</p>
<div class="feld mit">
  <div class="schild">mittig.</div>
</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
}

.titel {
  margin-bottom: 4px;
  font-size: 14px;
  color: #52525b;
}

.feld {
  display: grid;
  height: 140px;
  margin-bottom: 24px;
  background-color: #e4e4e7;
}

.schild {
  padding: 8px 16px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

/* place-items ist das Shorthand für align-items und
   justify-items. Ein Wert gilt für beide Achsen, und
   damit sind zwei Zeilen der kürzeste Weg, irgendetwas
   mittig zu setzen. */
.mit {
  place-items: center;
}

place-items ist das Shorthand für align-items und justify-items, place-content entsprechend für die beiden anderen. Ein Wert gilt für beide Achsen, zwei Werte bedeuten erst senkrecht, dann waagerecht.

Was daraus wird, steht im Streifen. Am unteren Feld stehen align-items: center und justify-items: center, zwei Zeilen aus einer. Im Reiter „Regeln“ steht daneben die eine, die du geschrieben hast.

Damit hast du den kürzesten Weg, irgendetwas mittig zu setzen.

display: grid; place-items: center;

Zwei Zeilen am Elternteil, nichts am Kind, und es sitzt in beide Richtungen in der Mitte. Ohne position, ohne transform und ohne eine geratene Zahl.

In der Aufgabe sitzen im Projektraster drei Dinge falsch, und jedes braucht eine andere dieser Eigenschaften.