Unterschiede: grid-column: 1 / 6; grid-column: 1 / span 5;

[michaah]

Ich habe mir zusammengereimt was wohl "span" als Option in einem gridlayout bedeutet, ein scharfes Verständnis davon habe ich nicht.

Im verlinkten Beispiel erscheinen "grid-column: 1 / 6;" und "grid-column: 1 / span 5;" austauschbar. Allerdings vermute ich dass es doch Unterschiede gibt, die nur nicht offensichtlich sind. Beim Ausprobieren ist mir nichts aufgefallen.

Ähnliches gilt für "grid-row: 1 / auto;" und "grid-row: 2;" Ob ich da auto schreibe oder nicht bleibt sich doch gleich?

Gibt es hier eine Seite die die Begriffe und Syntax von "grid" erklärt? Z.B. auch die Verwendung des "/" die, wo sich Definitionen von Zeile und Spalte mischen, nicht nachvollziehbar ist wenn die notwendige Syntax nicht zuvor eindeutig beschrieben ist. Klar, in Teilen geschieht das ja im TUT, aber wo es nicht geschieht verwirrt es.

[Rolf B]

Hallo michaah,

die Wirkung von grid-row: 1/6 und grid-row: 1/span 5 ist identisch. Der Unterschied entsteht bei automatischer Platzierung von grid items. Du kannst grid-row: span 2 angeben, und dann ist das Element 2 Grid-Zeilen hoch, bei automatischer Platzierung.

Außer in unserem Wiki findest Du auch Texte im Mozilla Developer Network: grid-row bei MDN

Rolf

[Gunnar Bittersmann]

@@Rolf B

Außer in unserem Wiki findest Du auch Texte im Mozilla Developer Network: grid-row bei MDN

Dort auch nicht nur schnöde Doku, sondern auch Tutorial (geschrieben von Rachel Andrews, IIRC).

Und eine interaktive Probierwiese (sowas wie Grid Garden, nur trocken (ohne Wasser) und ohne Mohrrüben).

Und dann ist da noch Jen Simmons’ YouTube-Kanal Layout Land.

LLAP 🖖

[Matthias Scharwies]

Servus!

Ich habe mir zusammengereimt was wohl "span" als Option in einem gridlayout bedeutet, ein scharfes Verständnis davon habe ich nicht.

Ich habe jetzt ein bisschen ein schlechtes Gewissen, weil ich das Tutorial im März 2017 mit der heißen Nadel gestrickt hatte.

Ich habe es jetzt um einen Absatz mit einigen Syntax-Beispielen und -Erklärungen erweitert:

• CSS/Tutorials/Grid/Grid-Items#Anfangs-_und_Endlinien_festlegen

Im verlinkten Beispiel erscheinen "grid-column: 1 / 6;" und "grid-column: 1 / span 5;" austauschbar. Allerdings vermute ich dass es doch Unterschiede gibt, die nur nicht offensichtlich sind. Beim Ausprobieren ist mir nichts aufgefallen.

Wie @Rolf B schon sagte, sind diese Werte gleich; interessanter wäre "grid-column: span 5;", da dort der Anfang nicht festgelegt wird.

Ähnliches gilt für "grid-row: 1 / auto;" und "grid-row: 2;" Ob ich da auto schreibe oder nicht bleibt sich doch gleich?

Ja! Ich habe jetzt unter das Frickl hinzugefügt:

{{Empfehlung|
Verändern Sie die Werte für grid-column und grid-row und beobachten Sie die Veränderungen.}}

Gibt es hier eine Seite die die Begriffe und Syntax von "grid" erklärt? Z.B. auch die Verwendung des "/" die, wo sich Definitionen von Zeile und Spalte mischen, nicht nachvollziehbar ist wenn die notwendige Syntax nicht zuvor eindeutig beschrieben ist. Klar, in Teilen geschieht das ja im TUT, aber wo es nicht geschieht verwirrt es.

Oben gab es einen Link auf die Referenz, was natürlich nicht optimal ist. Deshalb habe ich habe den Absatz hinzugefügt.

Generell gilt für mich nach 3 Jahren Erfahrung: Der stärkste Vorteil des Grid Layout ist seine Flexibilität, die mit zu vielen Angaben zur genauen Position eigentlich wieder kaputt gemacht wird.

Ziel ist es, (fast) alles den Browser machen zu lassen. Im vorletzten Kapitel gibt es dort Beispiele:

CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries

Nur ein englischer Link, den ich gestern gefunden habe:

• css-tricks.com: Responsive Grid Magazine Layout in Just 20 Lines of CSS

Bitte gib auch in den nächsten Kapiteln Feedback, wenn etwas nicht gut erklärt ist.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Das Kapitel: benannte Linien und Rasterbereiche ist jetzt auch überarbeitet.

Bitte durchlesen und, wenn nötig, verbessern!

Wünschenswert wären fertige Beispiele aus der Praxis! Hat da jemand irgendetwas?

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

ich will das jetzt nicht einfach editieren weil ich mir nicht sicher bin, was das Beste ist.

Zum einen finde ich es unschick, die Column-Linien "outer-start/center-start/center-end/outer-end" zu benennen. Das ist inkonsequent. center-start/-end definiert eine Spalte, outer-start/-end definiert 3 Spalten. Das sollte - finde ich - semantisch benannt werden. Sowas wie "nav-start", "main-start", "main-end", "infobar-end".

Dann kommst Du zum anderen im Abschnitt mit mehrfach benannten Linien auch nicht in die Schwierigkeit mit zwei outer-Bereichen, von denen Du einen irrtümlich footer genannt hast. Ist die Seite tot? Oder warum sind die Füße rechts statt unten 😉 ?

Dem Fazit kann ich so nicht folgen. Meine Formulierung wäre: Einsatzbereich für benannte Linien sind etwas für Grids mit wenigen Zeilen oder Spalten (was wäre dafür ein gutes deutsches Wort, Spur? Streifen? - die Tracks sind eigentlich ein grid-Begriff den man im englischen öfter findet). Das ist was anderes als "Webseiten mit wenigen Elementen", denn ich kann ja ein Grid als Grundstruktur haben und in den Zellen eine Masse an Elementen. Ich kann auch nur 3 Spalten haben und eine Masse an Zeilen, aber bei den Spalten Benennungen nutzen.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

ich will das jetzt nicht einfach editieren weil ich mir nicht sicher bin, was das Beste ist.

Ich auch nicht!

Zum einen finde ich es unschick, die Column-Linien "outer-start/center-start/center-end/outer-end" zu benennen. Das ist inkonsequent. center-start/-end definiert eine Spalte, outer-start/-end definiert 3 Spalten. Das sollte - finde ich - semantisch benannt werden. Sowas wie "nav-start", "main-start", "main-end", "infobar-end".

Das von mir übernommene Beispiel (https://gedd.ski/post/naming-css-grid-lines/) war so aufgebaut.

Vorher hatte ich ein Beispiel im Wiki, das mit main-start, etc aufgebaut war. Problem dort war, dass eine Webseite wie das SELFHTMl-Beispiel-Layout mit ca. 7 Rasterelementen das Konzept von main-start, etc bereits sprengte.

Dann kommst Du zum anderen im Abschnitt mit mehrfach benannten Linien auch nicht in die Schwierigkeit mit zwei outer-Bereichen, von denen Du einen irrtümlich footer genannt hast. Ist die Seite tot? Oder warum sind die Füße rechts statt unten 😉 ?

body {
	display: grid;
	grid-template-columns: [outer-start]               1fr
	                       [center-start]              2fr 
	                       [center-end footer-start]   1fr [footer-end outer-end];
  	grid-template-rows: [top] 1fr 1fr 1fr [bottom];
}	

footer {
  grid-column: footer-start / footer-end;
  grid-row: 3 / bottom;
}

Ne, das ist nicht irrtümlich, sondern so gewollt. 😀

Ein footer kann auch rechts unten sein.

Von einem Frickl-Beispiel habe ich da aber Abstand genommen.

Bei der Benennung folgen die meisten, eigentlich fast alle, der Notation *-start und *-end, was auf Dauer, gerade bei 2Dimensionen verwirrt, wobei ich im horizontalen, dann doch eher *-top und *-bottom verwenden würde.

Dem Fazit kann ich so nicht folgen. Meine Formulierung wäre: Einsatzbereich für benannte Linien sind etwas für Grids mit wenigen Zeilen oder Spalten (was wäre dafür ein gutes deutsches Wort, Spur? Streifen? - die Tracks sind eigentlich ein grid-Begriff den man im englischen öfter findet).

Ja, und da hatte ich auch 2017 meine Mühe einen deutschen Begriff dafür zu finden, deshalb habe ich versucht, es ohne diesen Begriff zu erklären.

Das ist was anderes als "Webseiten mit wenigen Elementen", denn ich kann ja ein Grid als Grundstruktur haben und in den Zellen eine Masse an Elementen. Ich kann auch nur 3 Spalten haben und eine Masse an Zeilen, aber bei den Spalten Benennungen nutzen.

Ok, stimmt - da überlege ich noch einmal.

Grid ist ungeheuer umfangreich - viele Anwendungen (so auch die von mir anfangs verwendeten ASCII-Schemata) sind im Real Life imho aber doch eher unpraktisch.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Bei der Benennung folgen die meisten, eigentlich fast alle, der Notation *-start und *-end, was auf Dauer, gerade bei 2Dimensionen verwirrt, wobei ich im horizontalen, dann doch eher *-top und *-bottom verwenden würde.

Das macht keinen Sinn.

Der Vorteil, die vom Standard vorgesehenen Benennungen <name>-start und <name>-end zu verwenden, ist doch, dass man dann grid-column: <name>, grid-row: <name> (ja, auch das!) sowie grid-area: <name> schreiben kann.

☞ Beispiel

LLAP 🖖

[Rolf B]

Hallo Gunnar,

moment - diese -start/-end Notation der Line-Namen ist nicht einfach good practice, sondern hat vom Browser interpretierte Semantik?

grid-column: foo; sucht in den Spalten nach den Line-Names foo-start und foo-end? Das lese ich aus der Spec überhaupt nicht raus. Wo steht das?

Rolf

[Gunnar Bittersmann]

@@Rolf B

moment - diese -start/-end Notation der Line-Namen ist nicht einfach good practice, sondern hat vom Browser interpretierte Semantik?

Ja.

grid-column: foo; sucht in den Spalten nach den Line-Names foo-start und foo-end?

So ist es.

Das lese ich aus der Spec überhaupt nicht raus. Wo steht das?

In § 7.3.3. Siehe auch § 7.3.2 darüber.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Das lese ich aus der Spec überhaupt nicht raus. Wo steht das?

In § 7.3.3. Siehe auch § 7.3.2 darüber.

Es steht übrigens auch durch gelbe Kästen hervorgehoben in den Beschreibungen sowohl von grid-column als auch von grid-row in MDN.

Aber wenn ich hier erwähne, dass es bessere Quellen als das SELFHTML-Wiki gibt, dann bin ich der Böse. 🤷‍♂️

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Aber wenn ich hier erwähne, dass es bessere Quellen als das SELFHTML-Wiki gibt, dann bin ich der Böse. 🤷‍♂️

Sonitus facit musica.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Rolf B

Zum einen finde ich es unschick, die Column-Linien "outer-start/center-start/center-end/outer-end" zu benennen. Das ist inkonsequent. center-start/-end definiert eine Spalte, outer-start/-end definiert 3 Spalten.

Was wäre daran inkonsequent?

Das sollte - finde ich - semantisch benannt werden. Sowas wie "nav-start", "main-start", "main-end", "infobar-end".

Nein. Grid macht hier das Seitenlayout. In Bezug auf die Seite sind outer und center durchaus schick.

Bei mehr Seiteninhalt würden an diesen Linien noch andere Elemente ausgerichtet sein; da wäre die Benennung nach einem von diesen ziemlich unschick.

LLAP 🖖