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

[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