grid, 1. areas, 2. text-positionierung

[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