grid, 1. areas, 2. text-positionierung

[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