grid, 1. areas, 2. text-positionierung

[Matthias Scharwies]

Servus!

Hallo Michaah, ...

Das div #wiewo soll unten rechts hin:

#wowie {
  grid-column: -2 / -1;
  grid-row: 4 / 5;  
  background: red;
  
}

Das klappt - du hast in aber Deinem neuen Online-Beispiel http://ac52.de/test-rechtsunten_grid.html immer noch die Doppelung grid-area vs grid-column.

→ grid-area: wo-und-wie;wird überschrieben.

Vorgehensweise ist wie bei h1:

• grid-column: -2 / -1;geht vom rechten Rand (-1) eins weiter links
• grid-row: 4 / 5; setzt das Element zwischen 4. und 5. Linie
  • Warum geht hier nicht grid-row: -2 / -1; ? - weil wir keinen Wert für grid-template-rows gesetzt haben.

A) Das Onlinebeispiel ist jedoch anders strukturiert als das hier oben dargestellte. Ersteres weiß ich nicht mit meinen Layout in Zusammenhang zu bringen, letzters hat mir dann doch weitergeholfen ... auch wenn ich die Prinzipien (templates vs. konkrete Definitionen) nach wie vor nicht verstehe.

In den ASCII-Templates legst du ein Raster fest. Auch mit der Kombi

body {
  display: grid;
  grid-template-columns: repeat(5, 1fr); 
  grid-template-rows: repeat(5, 1fr); 
}

legst du ein Raster fest. Was passiert aber, wenn ein neues Kindelement auftaucht? Also könntest du die letzte Deklaration weglassen und so viel Reihen bilden lassen wie möglich.

Dann kannst du aber nicht mit -1 die letzte Rasterlinie ansprechen, sondern musst mit 4/5 das grid item zwischen 4. und 5. Linie definieren.

B) Das jedoch mal beiseite, grid-im-grid ("#wowie {display: grid;}" im onlinebspl.) ist oder ist nicht das selbe wie ein subgrid? Ich verstehe nicht warum ich #wowie ein "display:grid;" mitgeben muß?

Weil grid eben nur auf direkte Kindelemente wirkt.

Es gibt subgrid (CSS/Tutorials/Grid/Verschachtelte_Raster), das läuft aber nur im Firefox.

Hier ist nun mein Hauptanliegen: warum ist zwischen p#adresse und p#kontakt soviel Platz, bzw. woran richtet p#adresse sich aus?

In den Entwicklertools (F12) habe ich nichts ausmachen können was diesen Abstand definiert.

Weil du nur #wowie p selektierst:

#wowie {
  align-items: end;
  justify-items: end;
  display: grid;
}

#wowie p {
    align-self: end;
    justify-self: end;
}

Die einzige (unschöne und unerwünschte) Möglichkeit p#adresse weiter nach unten zu drücken besteht für mich darin oben ein paar "br" drauf zu packen. Ginge das nicht anders?

Doch. Du hast hier wieder doppelt gemoppelt:

#wowie {align-items:end} legt alle Rasterfelder nach unten

#wowie p {align-self:end} legt alle p innerhalb von #wowie nach unten

Du hast aber mittlerweile 2p-Elemente, die unterschiedlich formatiert werden sollen.

Mit p#adresse , bzw besser nur #adresse könntest du jetzt der Adresse eine eigene Festlegung geben. Abstände werden nicht mit br sondern im CSS mit margin, padding und gap realisiert.

Herzliche Grüße

Matthias Scharwies