Frage zum Wiki-Artikel „grid-template-areas“

[Nix]

Irritierend ist, daß her gesagt wird, „grid-template-areas legt Aufbau und Position von vorher mit grid-area bestimmten Rasterelementen fest“. Grid-areas aber bestimmt doch („nur“) die Größe des Grid (weil: grid-template-areas ist ja davon eine Eigenschaft bzw. Funktionalität) fest. Und das, da grid-area Spalten- und Zeilenangaben haben will, innerhalb eines anderen, übergeordneten, Grid?

BTW: grid: kommt zwar vor – aber nur nebenher, in manchen Beispielen.

[Matthias Scharwies]

Servus!

Irritierend ist, daß her gesagt wird, „grid-template-areas legt Aufbau und Position von vorher mit grid-area bestimmten Rasterelementen fest“.

Hab ich so gelassen, aber unten das ergänzt:

In grid-template-areas werden nun Rasterbereiche in einem ASCII-Schema festgelegt. Diese Rasterbereiche können mit grid-area bestimmten Elementen zugeordnet werden.

Grid-areas aber bestimmt doch („nur“) die Größe des Grid (weil: grid-template-areas ist ja davon eine Eigenschaft bzw. Funktionalität) fest.

Nein, da ist der Begriff Größe imho irreführend, da er an Längenangaben erinnert. Das habe ich hier neu formuliert:

Die Eigenschaft grid-area ist … . Mit ihr kann einem Element innerhab des grid ein Rasterbereich zugeordnet werden, der sich über mehrere Rasterfelder erstreckt, indem durch eine Linie, Spanne oder none Beginn und Ausmaß der grid-area festgelegt wird.

Und das, da grid-area Spalten- und Zeilenangaben haben will, innerhalb eines anderen, übergeordneten, Grid?

Ein Grid ist immer nur ein Raster, das Rasterfelder hat. Wenn ein Kindelement in einem Rasterfeld ein neues Raster erhält, hat das nichts mit den Einstellungen des übergeordneten Rasters zu tun (außer der äußeren Größe).

BTW: grid: kommt zwar vor – aber nur nebenher, in manchen Beispielen.

Das wird ja auf der rechten Sidebar, bzw. in den Tutorials verlinkt. Da sollte man nicht in jedem Kontext bei Adam und Eva anfangen.

Danke für die Rückmeldung

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

was da vorher und nachher ist, darüber kann man diskutieren, letztlich ist es wurscht.

Kurz gesagt ist es so:

Mit grid-area gibt ein Element an, wo es hin möchte. Mit Nummern, Spans oder Tracknamen.

Mit grid-template-areas definiert man „grafisch“, wo die benannten Tracks sind.

Mit grid fasst man areas und Trackbreiten zusammen.

Rolf

[nix]

Apropos Tracknamen: hab’ da vorhin in Safari entdeckt, daß der einem benannten Grid-Area gleich Zeilen- und Spaltennamen mit auf den Weg gibt. Schema:

grid-area: "dies und das" 1fr "hat auch namen" 1fr;

leitet der, zumindest im Inspektor, dies-start, dies-end, und-start, und-end, … sowie dies-start, dies-end, hat-start, hat-end … ab.

1. das, solche Tracknamen, funktionieren auch im Stylesheet

2. da kommt was doppelt vor? Ja. Und der Browser dröstelt das, ob Zeile oder Spalte, von alleine auseinander.

Ob das jetzt aber offiziell oder „safarisch“ ist …?

[Matthias Scharwies]

Servus!

Apropos Tracknamen: hab’ da vorhin in Safari entdeckt, daß der einem benannten Grid-Area gleich Zeilen- und Spaltennamen mit auf den Weg gibt. Schema: ...

Ja, im Wiki:

CSS/Tutorials/Grid/benannte_Linien_und_Rasterbereiche#benannte_Linien

Die Rasterlinien am Anfang einer grid-area konnen mit …-start , am Ende mit …-end aufgerufen werden. Umgekehrt erzeugen benannte Rasterlinien im CSS implizit auch eine solche grid-area:

Und dann das Beispiel: #zentriertes_Holy-Grail-Layout

Herzliche Grüße

Matthias Scharwies

[nix]

Das ist aber nicht ganz, was ich meine. Laß mich mal ein Stückhen “holly grail” abändern. Und zwar so, daß es dann immer noch, ohne witere Änderungen (wie bekäme man auch die so deklarierten und nicht benutzten Bezeichnungen wieder weg? 😉), funktionieren müßte:

grid-template-areas:
    "head" min-content
    "main" 1fr
    "foot" min-content ;

[Gunnar Bittersmann]

@@Matthias Scharwies

In grid-template-areas werden nun Rasterbereiche in einem ASCII-Schema festgelegt.

ASCII-was??

Der Begriff ist unverständlich. Und er ist falsch.

Die Bezeichner von areas haben nichts mit ASCII zu tun.

🖖 Живіть довго і процвітайте

[nix]

Es sollte sich dabei vmtl. um die Spielregeln drehen, welche Bezeichnern für z. B. Klassen auch angedient werden. Wobei ich bei denen letzten gemerkt habe, daß man zwar manche Emojis dafür verwenden kann. Aber nur manche. Wobei ich da aber noch auf hoher See der Code-Sequenzen bin, gebe mich erst mal und lieber mit ein paar hübschen „sprechenden und platzsparenden Bildchen“ zufrieden.

Das ASCII, denke ich, war ein übriggebliebenes Fragment von ASCII-Art. Und die ignoriert wiederum (lustigerweise oder nur anscheinend) U+2500 ff.

[Rolf B]

Hallo nix,

CSS Namen

Zeichen über U+2500 sollten funktionieren. Egal ob chinesische Ideogramme oder koptische Buchstaben. Wenn bei dir nicht, sehe ich 99% Wahrscheinlichkeit für ein Layer-8 Problem.

Rolf

[nix]

Zu viel Aufwand für zu wenig Nutzen wäre es mir, folgendes zu Überprüfen: wenn die Byte-Sequenz von einem Algorihtmus (hier dann vmtl. fälschlicherweise) so aufteteilt wird, daß der vermeintliche Anfang des nächsten Zeichens ein illegales wäre … Denn das, was „CSS“ sieht, muß ja nicht mit dem zusammen passen, was sich als Text unseren Augen darstellt.

Also Byte-Folgen wie abc ➝ a + bc oder efgh ➝ef + gh, wobei b bzw. g dann vielleicht vor einem „du kommst hier nicht rein“ stehen würden.

[Rolf B]

Hallo nix,

na wie auch immer. Es ist aber auch egal, denn das herausragende Merkmal von ASCII-Art ist ja, dass sie mit ASCII-Zeichen (Codepoints 32 bis 127) arbeitet. Unicodezeichen mit einem Codepoint über 0x2500 sind da eh irrelevant.

In der Gegend sind aber auch ein paar Zeichen, die ungewöhnliche Breiten haben. Unicode hat da ein paar lustige Kameraden, wie Nullbreite Zeichenverbinder oder Geviertbreite Leerstellen. Die können einen Editor ggf. aus dem Tritt bringen.

Rolf