grid, 1. areas, 2. text-positionierung

[michaah]

Die genannte Seite ist Ergebnis meiner heutigen Bemühungen grid design zu verstehen.

Das (heutige) Detailproblem bestand eigentlich nur darin, Text in einer Zelle statt links oben eben rechts unten auszurichten (Text "wie und wo").

Versucht habe ich es sowohl mit jusitfy-items+align-items als auch mit position:relative ... um nun nach Stunden festzustellen dass von mir verwendete Chromebrowser (Vivaldi und Chromium) den Text auf Basis einen UA-stylesheets mittels margin-block-start etc. zentrieren (soweit ich das verstanden habe). Jedenfalls ist es mir nicht gelungen diesen Wert zu überschreiben oder sonstwie den Text nach meinen Wünschen zu positionieren. Hilfe dazu wäre nett.

Beim Zusammenbasteln des Beispiels zeigte sich ausserdem, das ich das Grid-design nicht verstehe, obwohl ich mich nun schon länger immer wieder damit befasse. Ich weiß garnicht genau was ich überhaupt fragen soll, weil kaum etwas so funktioniert wie ich es zu verstehen glaubte (und ich habe die entsprechenden Seiten mehrmals durchgelesen):

Ich versteh nicht warum man jede area nochmals individuell definieren muß, obwohl die entsprechenden infos bereits in grid-template-ares enthalten sind. Das Ergebnis ist jedoch ernüchternd, denn die Anordnung entspricht nicht dem Template ... und ich habe keine Idee wo mein Denkfehler liegt. Auch hierzu wäre es nett einen Hinweis zu erhalten.

Gute Nacht erstmal ...

[Matthias Scharwies]

Hallo Michaah,

ich verzichte immer öfter auf eine andere Positionierung, wil ich grid gut finde. Warum - dazu später mehr!

Beim Zusammenbasteln des Beispiels zeigte sich ausserdem, das ich das Grid-design nicht verstehe, obwohl ich mich nun schon länger immer wieder damit befasse. Ich weiß garnicht genau was ich überhaupt fragen soll, weil kaum etwas so funktioniert wie ich es zu verstehen glaubte (und ich habe die entsprechenden Seiten mehrmals durchgelesen):

Grundproblem: Im Layouten mit float und selbst mit Flexbox formatierst du die Kindelemente - im Grid Layout zuerst aber den Grid-Container:

1. Grid-Container

body {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1em;  
	min-height: 90vh;
}

body > * {
  border: 1px solid;
}

kein position:relative; margin, padding etc. (BTW: padding: 0%em; %em kann nicht funzen.)

Wir haben jetzt ein Grid mit 6 Spalten - was aber nur auf Desktops gut aussieht und auf dem Handy Scheiße, das lösen wir später. Der Übersicht halber habe ich gap: 1em gesetzt.

Damit sich die Kindelemente gut verteilen, habe ich den body mal auf 90vh (Viewport-Höhe) gesetzt.

body > *ist nur der Optik wegen und muss später weg.

2. Kind-Elemente

Ich habe eine h1 eingesetzt, die aber nur in Feld 1/1 nicht gut aussieht, deshalb:

h1 {
  grid-column: 1 / -1;
  background: gold;
  height: min-content;
}

Die h1 erstreckt sich nun von der 1. Rasterlinie links am body bis zur -1. (der letzten am rechten Rand).

Ich will ja nur die Überschrift als Reihe, deshalb habe ich die Höhe mit min-content gesetzt. (-> Hier müsstest Du jetzt body: {grid-template-rows: min-content auto auto auto;} setzen, damit die Reihe nur so hoch ist wie die h1).

Das (heutige) Detailproblem bestand eigentlich nur darin, Text in einer Zelle statt links oben eben rechts unten auszurichten (Text "wie und wo").

Das div #wiewo soll unten rechts hin:

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

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.

Hier ist das Beispiel online: michaah.html

(Setz mal #wowie {grid-column: -3 / -1; grid-row: 3 / 5;}. Wenn dir der Text(inhalt) an den Rand stößt, kannst du padding, text-align, etc verwenden.)

Versucht habe ich es sowohl mit jusitfy-items+align-items als auch mit position:relative ... um nun nach Stunden festzustellen dass von mir verwendete Chromebrowser (Vivaldi und Chromium) den Text auf Basis einen UA-stylesheets mittels margin-block-start etc. zentrieren (soweit ich das verstanden habe). Jedenfalls ist es mir nicht gelungen diesen Wert zu überschreiben oder sonstwie den Text nach meinen Wünschen zu positionieren. Hilfe dazu wäre nett.

Ohne das im einzelnen zu analysieren, das waren zu viele CSS-Regelsätze, weniger ist beim Testen mehr.

Ich versteh nicht warum man jede area nochmals individuell definieren muß, obwohl die entsprechenden infos bereits in grid-template-ares enthalten sind.

Nein, dem ist nicht so!

Das Ergebnis ist jedoch ernüchternd, denn die Anordnung entspricht nicht dem Template ... und ich habe keine Idee wo mein Denkfehler liegt. Auch hierzu wäre es nett einen Hinweis zu erhalten.

 	div #wowie {
  					grid-area: wowie; 	 			
  					background: red;

 		}		

Du selektierst ein #wowie, das ein Kind von div ist; entferne mal das Leerzeichen (oder den div-Selektor) und du wirst sehen, dass es funzt. (Wenn Du zum Testen ein background:red oder eine border: 1px dashed; festgelegt hättest, hättest du dich gewundert, dass selbst das nicht funzt.)

3. Was muss / sollte man bei Grid Layout definieren?

Verquere Welt, ich hatte zuerst das Tutorial im SELF-Wiki geschrieben, bevor ich Grid praktisch angewendet habe. Gerade Kapitel 4 (CSS/Tutorials/Grid/benannte_Linien_und_Rasterbereiche) schien mir mit seinen template-areas eine Lösung für Layouts zu sein. Leider musst Du hier mit media queries jede Eventualität festlegen.

Mitterweile verwende ich bei Grid nur noch 2 Anwendungsfälle:

footer * {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em;  
}

Wenn ich 3 kleine(re) Elemente nebeneinander postioneren will, z.B in einem footer.

Wenn ich nicht weiß, wie groß der Viewport ist (also fast immer!), ist es besser keine festen Raster im Grid-Container festzulegen (siehe Bsp. am Anfang: 6 Spalten am Handy). Hier ist es besser für die Grid-Elemente Mindestgrößen festzulegen:

• CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries

@media (min-width: 40em) {
  body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  }
}

Ab einer Breite von 40 em (vorher macht es keinen Sinn, kleine Blöcke nebeneinander zu positionieren) werden Rasterfelder angelegt, die mindestens 20em und maximal in den Grid-Container passen, und zwar so viele, wie's geht:

60em Breite 3 Felder mit je 20em

70em Breite: 3 Felder mit je 23.3em

75em Breite: 3 Felder mit je 25em;

80em Breite: 4 Felder mit je 20em;

99em Breite: 4 Felder mit je 24.xem Breite

Lass die Elemente dorthin fallen, wo sie hinpassen! Wenn du ein Rasterfeld anders positionieren willst, auch ok.

Ich hoffe, ein bisschen zur Aufklärung beigetragen zu haben.

Herzliche Grüße

Matthias Scharwies

[michaah]

Hi, erstmal vielen Dank für diese ausführliche, detaillierte Hilfestellung. Das ist beeindruckend.

Viel kann ich dazu noch nicht sagen weil ich das erstmal durcharbeiten muß, nur soviel zur Erläuterung weil es von dir angesprochen wurde: Dass dies Beispiel handy-untauglich ist und nur auf dem Desktop funktionert (wenn es das dann mal tut ;-) ) ist klar. Die Komplettlösung soll aber mittels media-queries auf drei Grunddesigns aufgespalten werden, handy einspaltiger "Schlauch", handy landscape/tabletts zweispaltig, Desktop dreispaltig. Die areas hier im Beispiel verdeutlichen den dreispaltigen Ansatz, die columms sind nur Detail.

Zugegebenermaßen habe ich von der Desktopvariante eine bestimmte gestalterische Vorstellung, die, salopp gesagt, mit "lass den Browser und die Gridlogik mal machen und herumschieben" nicht erreicht werden kann. Aber das ist definitiv eine Hürde ich mir selbst dahingestellt habe ;-) .

Jetzt muß ich deine Hinweise erstmal durchkauen …

Gruß

m.

[michaah]

Mein Hauptproblem bleibt leider unbeantwortet: Wie positioniere ich den Text in der Box, nicht die Box selbst, unten rechts? Besonders augenfällig wäre es in deinem Beispiel mit den von dir vorgeschlagenen alternativen Werten für die rote Box.

Zitat: (Setz mal #wowie {grid-column: -3 / -1; grid-row: 3 / 5;}. Wenn dir der Text(inhalt) an den Rand stößt, kannst du padding, text-align, etc verwenden.)

Wie kann ich den Text in dieser Box wie gewünscht anordnen.

Im weiteren fand ich dein Beispiel eher verwirrend, auch weil du mir ja auch eine andere Gestaltung nahelegst. Vor allem aber sehe ich nach wie vor das Grundprinzip nicht, aber meine Fragen will ich hier jetzt nicht weiter ausführen weil ich sie nicht mit dem hier oben genannten Problem vermischen möchte.

[Matthias Scharwies]

Servus!

(Setz mal #wowie {grid-column: -3 / -1; grid-row: 3 / 5;}. Wenn dir der Text(inhalt) an den Rand stößt, kannst du padding, text-align, etc verwenden.)

Mein Hauptproblem bleibt leider unbeantwortet: Wie positioniere ich den Text in der Box, nicht die Box selbst, unten rechts?

Dein Hauptproblem war imho a. das fehlende Verständnis von Grid und b. eine chaotische Vorgehensweise (nicht ohne Grund heißt dein Beispiel Michaahs Gridchaos 😀).

Ich hatte dir einen Weg gezeigt, wie man mit wenigen Selektoren ein Grid aufbaut und dann dieses peu à peu gestaltet.

Wie positioniere ich den Text in der Box, nicht die Box selbst, unten rechts?

Wenn Du dafür nicht padding, text-align etc, sondern grid verwenden willst, benötigst du für #wowieein zweites Grid Layout und dann noch zwei Deklarationen für #wowie p:

#wowie {
 ...
  display: grid;
}

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

(Du hattest in Michaahs Grid-Chaos align-items und justify-items auskommentiert. Das hätte sich aber auf den Grid-Container, nicht auf das Grid-Element bezogen.)

Live-Beispiel: michaah.html (mit #wowie p unten rechts)

SELF-Wiki: CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items (Kapitel 6)

Entwerfen von CSS-Layouts

Im weiteren fand ich dein Beispiel eher verwirrend, auch weil du mir ja auch eine andere Gestaltung nahelegst.

Ich hatte extra drauf geachtet, mein Beispiel von Anfang an ausgehend zu entwickeln, so dass du die Schritte nachvollziehen und dann dein eigenes Ding machen kannst.

Ich fand Dein Beispiel verwirrend, weil du in deinem CSS mehrere ungültige Selektoren (div #wowie), sowie ungültige Werte (%em) hattest.

Beim Testen einer solchen Webseite solltest du

1. Überlegen, welche Eigenschaft du in die Seite einfügen möchtest
2. mit möglichst wenig HTML und wenig CSS-Regelsätzen anfangen
3. den Seiteninspektor verwenden:
   • SELFWiki: HTML/Tutorials/HTML_&_CSS_mit_dem_Seiteninspektor_untersuchen
   • codemakery.ch: Teil 4: Entwicklertools im Browser

Dann hättest Du gesehen, dass dein CSS-Markup aus einem Chaos sich widersprechender und fehlerhafter Regeln besteht:

		body {
					display: grid;
       			margin: 3em;
					border: 0px solid; 
					border-color: #cbcbcb;
					padding: 0%em;
					gap: 0em;  
  					grid-template-columns: repeat(6, 1fr);
  					grid-template-rows: auto auto auto auto auto;
  					grid-template-areas: 
  					"graphik-1 graphik-2 angebot-1 angebot-1 zugang zugang"
  					"graphik-3 graphik-4 angebot-1 angebot-1 zugang zugang"
              	"head head head head plan plan"
					"graphik-5 graphik-6 angebot-2 angebot-2 wowie wowie"
					"graphik-7 graphik-8 angebot-2 angebot-2 wowie wowie";
								
		/*			grid-template-columns: repeat(6, 1fr);
  					grid-template-rows: repeat(7, 1fr);
  					grid-template-rows: auto auto auto auto auto;
  					grid-template-areas: 
  					"aside aside aside aside aside aside" 
              	"aside aside aside aside aside aside"
					"foot foot foot foot foot foot"; */
					font-size: 1.2em;
					position: relative;
}

Auskommentieren ist schon mal gut, lösche aber alles was du nicht für dein Problem brauchst.

Ich habe so mit dem Grid-Container angefangen:

body {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: min-content auto auto auto auto auto;
  	grid-template-areas: 
			"h1        h1        h1        h1        h1     h1    " 
  			"graphik-1 graphik-2 angebot-1 angebot-1 zugang zugang"
  			"graphik-3 graphik-4 angebot-1 angebot-1 zugang zugang"
            "head      head      head      head      plan   plan"
			"graphik-5 graphik-6 angebot-2 angebot-2 wowie wowie"
			"graphik-7 graphik-8 angebot-2 angebot-2 wowie wowie";	
	gap: 1em;  
	min-height: 90vh;
}

Ich habe die Bereiche im ASCII-Schema mit Leerzeichen aufgefüllt, damit das Grid erkennbar ist.

Jetzt müssen die einzelnen Grid-Elemente im Raster positioniert werden:

  	div #wowie {
  					grid-area: wowie; 	 			
  					grid-column: 5 / 7;
					grid-row: 4 / 6;
 		}	

Du überschreibst die grid-area ja wieder. Das ist dir selbst aufgefallen, also muss der Fehler irgendwo vorher liegen.

Im Seiteninspektor hättest du sehen können, dass keine CSS-Formatierung auf wowie angewandt wird - warum?

Weil du jeden Selektor (außer header) falsch angelegt hattest:

aside #graphik-1 {
					...
} 

Meine Version:

h1 {
  grid-area: h1;
  background: gold;
  height: min-content;
}

#wowie {
  grid-area: wowie;  
  background: lime;
}

1. Ich färbe die gewünschten Elemente mit einer Signalfarbe, damit ich gleich erkenne, ob der Selektor auch greift.
2. Ich fange mit h1 an, weil ich das schon mal gemacht habe und dann das bewährte Prinzip weiter ausbaue.

Live-Beispiel: michaah-2.html (mit grid-template-area)

Ich habe nicht alle Elemente so formatiert, das kannst du jetzt tun. Ob man alle img in aside-Elemente packt, ohne das es einen Inhalt gibt, könnte man auch diskutieren, aber das war ja nicht Deine Frage.

Vor allem aber sehe ich nach wie vor das Grundprinzip nicht, aber meine Fragen will ich hier jetzt nicht weiter ausführen weil ich sie nicht mit dem hier oben genannten Problem vermischen möchte.

Ich habe jetzt die oben genannten Fragen beantwortet, hoffe aber, dass du auch das Grundprinzip bald siehst.

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo michaah,

Mein Hauptproblem bleibt leider unbeantwortet: Wie positioniere ich den Text in der Box, nicht die Box selbst, unten rechts?

Eine Möglichkeit wäre, der box ein display: table-cell zu geben und mit text-align und vertical-align zu arbeiten, eine weitere, display: flex in Verbindung mit text-align und flex-direction zu nutzen.

Bis demnächst
Matthias

[Code_Lisa]

Wow dankeschön für deine Mühe alles soo detailliert aufzuschreiben :-) Da habe ich heute Nachmittag richtig etwas durchzuarbeiten.

[Matthias Scharwies]

Servus!

Wow dankeschön für deine Mühe alles soo detailliert aufzuschreiben :-) Da habe ich heute Nachmittag richtig etwas durchzuarbeiten.

Danke für's Lob!

Verschachtelte Raster mit subgrid gehen bis jetzt nur im FF - ich schau schon mal nach guten Beispielen.

Ich wollte hier (Grid-Items#feststehender_Footer (Bsp. mit Rechtsklick im neuen Tab öffnen)) eigentlich die Navi als subgrid realisieren, aber body nav ul li sind ja keine Kindeskinder sondern fast schon Ururenkel. Hast du /habt ihr eine Idee für ein Beispiel mit 3 Ebenen??

Evtl. body > article > img oder body > footer > *

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Navi als subgrid

das kann man so langsam angehen. Bisher war der Fuchs der Einzige, der Subgrid implementiert.

Aber im Juni stand im Chromium Blog, dass das MS Edge Team sich daran gemacht hätte, die Grid-Engine von Chromium zu modernisieren und dabei auch Subgrid einbauen wolle.

Rolf

[Gunnar Bittersmann]

@@Matthias Scharwies

Hast du /habt ihr eine Idee für ein Beispiel mit 3 Ebenen??

Darf’s auch etwas mehr sein?

😷 LLAP

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Hast du /habt ihr eine Idee für ein Beispiel mit 3 Ebenen??

Darf’s auch etwas mehr sein?

Das ist ja mal cool. Aber als Anfangsbeispiel braucht man halt etwas, was von der HTML-Struktur und auch dem CSS für Anfänger durchschaubar ist.

Ich hab dein Beispiel mal unten verlinkt.

Hast du /habt ihr eine Idee für ein Beispiel mit 3 Ebenen?? das kann man so langsam angehen. Bisher war der Fuchs der Einzige, der Subgrid implementiert.

Ja, aber dass halt schon mal was dasteht. Ich habe jetzt Produktkarten als Beispiel genommen.

Komplexere Beispiele kann man dann erstellen, wenn der Browser-Support besser ist.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Hast du /habt ihr eine Idee für ein Beispiel mit 3 Ebenen??

Darf’s auch etwas mehr sein?

Das ist ja mal cool. Aber als Anfangsbeispiel braucht man halt etwas, was von der HTML-Struktur und auch dem CSS für Anfänger durchschaubar ist.

Och, die HTML-Struktur ist doch sehr überschaubar. Wo das jetzt als Beispiel herhalten soll, hab ich mal den Pug-Quelltext durch richtiges HTML ersetzt.

Ich hatte auch mit dem Gedanken gespielt, nur die Start-Tags zu notieren:

<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
<!-- End tags are for loosers. -->

Aber als Beispiel taugt eher ein praktisch sinnvolles, nicht Kunst.

BTW, ich hatte erst an den Sierpiński-Teppich gedacht, aber braucht man dann schon eine weniger durchschaubare HTML-Struktur.

😷 LLAP

[Tabellenkalk]

Hallo,

<!-- End tags are for loosers. -->

Schließ-Tags sind für Löser? Also etwas, das was befestigt, ist nur für Jemanden der etwas lockern will. So gesehn…

Gruß
Kalk

[Der Martin]

Hi,

<!-- End tags are for loosers. -->

das ist mir auch unangenehm aufgefallen.

Schließ-Tags sind für Löser?

Dann wären es ja loosener. Nein, looser kann nur der Komparativ des Adjektivs loose sein. Also noch lockerer.

Aber die Unsitte, die englische Vokabel für verlieren mit Doppel-o zu schreiben, ist irgendwie weit verbreitet. Warum auch immer.

Live long and pros healthy,
 Martin

[Tabellenkalk]

Hallo,

Dann wären es ja loosener. Nein, looser kann nur der Komparativ des Adjektivs loose sein. Also noch lockerer.

i hatt vong Satzstellung her halt a Substantiv erwart't. N Komparativ krieg i da nit gbacken…

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

<!-- End tags are for loosers. -->

Schließ-Tags sind für Löser?

I’m lost. Ich bin völlig aufgelöst.

Englische Orthografie ist aber auch eher Glückssache, oder?

“It’s a town full of losers and I’m pulling out of here to win”
—Bruce Springsteen, Thunder Road

😷 LLAP

[MudGuard]

Hi,

Englische Orthografie ist aber auch eher Glückssache, oder?

ja, daß sich loser auf user reimt, ist schon erstaunlich.

Da besteht einfach kein Zusammenhang zwischen Schreibweise und Aussprache, siehe z.B. tough, though, thought, through trough, thorough …

Ich find's immer nett, wenn Englisch-Sprecher in einem Forum die Aussprache anhand von geschriebenen Beispielen zu erklären versuchen - besonders oft werden dann Beispiele verwendet, die regional äußerst unterschiedlich ausgesprochen werden …

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@Gunnar Bittersmann

BTW, ich hatte erst an den Sierpiński-Teppich gedacht

☞ https://twitter.com/pickover/status/1304968916393955334

(Huch, der @Matthias Apsel ist ja mit auf dem Bild!)

😷 LLAP

PS: Um das Vorposting wiederzufunden, hatte ich nach „sierpinski“ gesucht. 0 Treffer. Erst die Suche nach „sierpiński“ mit ń brachte Erfolg.

Sollte nicht ein Suchebegriff ohne diakritische Zeichen auch Treffer liefern, wo dieser richtig geschrieben ist – und andersrum? @Christian Kruse

[Matthias Apsel]

Hallo Gunnar Bittersmann,

(Huch, der @Matthias Apsel ist ja mit auf dem Bild!)

Aber nur am Rande 😄

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

(Huch, der @Matthias Apsel ist ja mit auf dem Bild!)

Aber nur am Rande 😄

Aber mit Strapsen. 🤣

😷 LLAP

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Aber mit Strapsen. 🤣

und mit nicht viel mehr am Leib. 🤣

Bis demnächst
Matthias

[michaah]

Hallo Michaah,

...

Das div #wiewo soll unten rechts hin:

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

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.

Hier ist das Beispiel online: michaah.html

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.

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ß?

Siehe neue problematische Seite:

C) 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.

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? http://ac52.de/test-rechtsunten_grid.html

[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

[michaah]

Weil grid eben nur auf direkte Kindelemente wirkt.

Ok, das werde ich mir mal ebenso dick und fett notieren 😉

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

Danke für die Klärung. Ich will hier bestimmt keine Auszeichnungen verwenden die zu browserspezifisch sind. Das war der Grund meiner Nachfrage, auch das hat sich damit geklärt. Danke.

...

Doch. Du hast hier wieder doppelt gemoppelt:

Ich weiß nicht warum ich mir bei grid soooo schwer tue die Zusammenhänge in ihrer Grundstruktur zu erkennen ....

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

"Rasterfelder" meint hier "alle 4 Zellen der grid-area "wo-und-wie""?

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

Diesen Satz würde ich verstehen, wenn das Ergebnis wäre dass sich beide "p" überschneiden/überdecken. Weil sie genau das nicht tun verstehe ich "alle nach unten" nicht. Vermutlich ist aber hier gemeint "von unten her aufeinander gestapelt".

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.

Das ist mir klar. Aber das Problem ist doch gerade dass alle Werte auf "0" stehen, und dennoch dieser große Abstand vorhanden ist, im Seiteninspector zwischen den beiden p Elementen kein definierter Abstand vorzufinden ist ... und meine Frage bleib: Woran richtet sich #adresse aus? Was verursacht den Abstand zwischen #adresse und #kontakt?

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@michaah

Weil grid eben nur auf direkte Kindelemente wirkt.

Ok, das werde ich mir mal ebenso dick und fett notieren 😉

Tu das, aber nimm nicht den dicksten Stift, den du hast. Den brauchst du nämlich, um das Notierte gleich wieder durchzustreichen. Weil es nicht stimmt.

Warum der @Matthias Scharwies das trotzdem wiederholt hat? 🤷‍♂️

😷 LLAP

[michaah]

Tu das, aber nimm nicht den dicksten Stift, den du hast. Den brauchst du nämlich, um das Notierte gleich wieder durchzustreichen. Weil es nicht stimmt.

Da bin ich natürlich ganz der Rechte das zu beurteilen. Das habe ich mir auf für den Zeitpunkt wo ich das durchblicke ... aber könnte es nicht sein, dass er vor dem Komma und du hinter dem Komma recht hast? Dein sehr schönes Beispiel hatte ich schon vor diesem Posting angeschaut. ich würde es verwenden wenn ich es ansatzweise durchblicken würde.

Würdest du meiner Annahme zustimmen, dass im Normalfall (und jetzt nicht spitzfindig werden 😉 ) grid sich auf die Kindelemente beschränkt, diese Einschränkung jedoch sinnvoll ausgehebelt werden kann?

[Gunnar Bittersmann]

@@michaah

aber könnte es nicht sein, dass er vor dem Komma und du hinter dem Komma recht hast?

Ja. Nur dass er den Teil nach dem Komma verschwiegen hat.

Grid-Items sind die Kindelemente des Grid-Elements (das war der Teil vor dem Komma), ::before- und :after-Pseudoelemente des Grid-Elements und andere Elemente, die per CSS dazu gebracht werden sich so zu verhalten, als wären sie Kindelemente (das war der Teil nach dem Komma).

😷 LLAP

[michaah]

Mercie.

Gruß

mhld

[michaah]

Ok, ich habs herausbekommen:

Die neu verlinkte "problematische Seite" zeigt das, man ist in einer grid-area nicht ganz so frei wie ich hoffte.

#adresse richtet sich an der die area durchquerenden grid Rasterlinie aus. Und die hängt eben auch von benachbartem Inhalt ab, im Beispiel von den benannten areas graphik-6 und graphik-8. Löscht man diese verschwindet der freie Raum zwischen #adresse und #kontakt. :-(

Man kann das auch mit einem oberen margin erzwingen, was mir jedoch sehr verkrampft erscheint.

Möglicherweise kann man auch eine 2p-in-div-in-grid-suppe zubereiten (nicht ausprobiert), oder den Inhalt der beiden p in ein p packen, letzteres wäre zwar eine technische Lösung, gefällt mir aber formal nicht.

Kurz, wenn jemand ne idee hat wie ich dem obern p austreibe sich an der Rasterlinie zu orientieren und sich einfach auf das untere p setzt ... her damit.

[michaah]

So, nun also doch die 2p-in-div-in-grid-suppenlösung. Funktioniert und hat eine innere Stimmigkeit. Ist halt suppig.

[Matthias Scharwies]

Servus!

Ich habe das vereinfachte Beispiel mal ins SELF-Wiki übernommen:

CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items#Impressum_unten_rechts

Auch wenn ich dafür teilweise meine Glaskugel verwenden musste glaube ich, dass ein Verständnisproblem neben den fehlerhaften CSS-Selektoren die Tatsache ist, dass das Grid Layout nur auf die direkten Kindelemente des Grid-Containers wirkt und nicht auf Kindeskind-Elemente wie #wiewo p .

Ich habe das in https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Grid-Container noch einmal erwähnt und dort den Absatz subgrid in ein eigenes Kapitel ausgelagert:

Verschachtelte Raster mit subgrid gehen bis jetzt nur im FF - ich schau schon mal nach guten Beispielen.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Tatsache ist, dass das Grid Layout nur auf die direkten Kindelemente des Grid-Containers wirkt und nicht auf Kindeskind-Elemente

Ach, ist das so?

Was dem einen seine Tatsachen, das dem anderen seine Nachtigall.

😷 LLAP

[Rolf B]

Hallo Gunnar,

display:contents; 😲

Was es nicht alles gibt!

Rolf

[Matthias Scharwies]

Servus!

Hallo Gunnar,

display:contents; 😲

Was es nicht alles gibt!

• Why display: contents is not CSS Grid Layout subgrid Rachel Andrew am 20.07. 2017

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Rachel für Gunnar zu zitieren ist schon eine besondere Form von Revanche 😂 (um mal die Kombination von Rachel und Rache zu vermeiden).

Mich würde auch interessieren, wieso caniuse.com für display:contents wegen Bugs eine eingeschränkte Nutzbarkeit bei Chrodge attestiert, bei Chrome aber nicht. Laut Chromium Bugtracker ist das nicht behoben, sollte also für beide gelten.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Rachel für Gunnar zu zitieren ist schon eine besondere Form von Revanche 😂 (um mal die Kombination von Rachel und Rache zu vermeiden).

Das ist aber wirklich nur Rachel (Verkleinerungsform von Rache), da ich mich lediglich auf die zweifelhafte Aussage, nur Kindelemente könnten Grid-Items sein, bezog und die Nützlichkeit von Subgrid gar nicht in Abrede stellte.

😷 LLAP