Frage zum Wiki-Artikel „grid-template“

[Manuell]

Die Grid-Shorthands grid-template und grid-template-areas sind ja wirklich Abkürzungen, erledigen den größten Tein beim „Gitter Schmieden“.

Aber sie sind anscheinend recht hartnäckig: was die an Grid-Eigenschaften bestimmen, läßt sich nicht(?) überschreiben. Also so wie bei anderen Shorthands. Beispielsweise

border: 1ex solid blue;
border-bottom-color: red;
border-left-style: inset;

läßt die Grenzlinien nicht auf „alles Blau und recht starker monotoner Rand“ „einfrieren“.

Im Gegensatz dazu ist es wenigstens mir bislang nicht gelungen, einem „Template-Shorthand-Grid“ beizubringen, daß es z.B. beim Anhängen „überzähliger“ Elemente entsprechend neue (als solche sichtbare) Zeilen oder Spalten ans jeweilige Grid dran hängt.

Wenn da z.B. eine Zeile mit drei Spalten deklariert wurde und dann vier oder mehr Items reingeschmissen werden, dann überlagert sich alles.

Habe ich das was übersehen? Oder sehen diese Shorthands tatsächlich schöner aus als sie dann sind?

[Rolf B]

Hallo Manuell,

Habe ich das was übersehen?

Ja. Uns deinen Code zu zeigen. Generell passiert das nicht, was Du beschreibst. Da ist was in deinem CSS, womit Du Dir auf den eigenen Füßen stehst.

Z.B. eine grid-area Angabe in deinen Grid-Items, die auf mehr wirkt, als Du denkst.

Schritt 1: Entwicklerwerkzeuge öffnen und im Elementinspektor schauen, welche Styles den Elementen zugewiesen werden.

Schritt 2: Mit deinem Code hier vorbeischauen, damit wir drauf gucken.

Wichtig: Nicht deinen Code ins Forum posten. Bitte ein Livebeispiel erstellen. Im Zweifelsfall bei codepen oder jsfiddle.

Rolf

[Manuell]

Nun, es gibt nicht „das“ Beispiel. Bisher ist es mir jedes Mal …“ — war der Anfang meiner Antwort. Und zwecks Quellenangabe habe ich noch Mal MDN besucht.

Was soll ich sagen? Ich bin über grid-auto-flow gestolpert. Das wird auf den anderen Seiten rund um das Thema nicht erwähnt, so daß ich es in diesem Zusammenhang irgend etwas zwischen vergessen und nicht relevant gehalten habe.

Aber genau das ist, was mich in die Knie gezwungen hat.

Allein: wie wird das von den Kurzformen gesetzt? Denn weder row, column, noch dense scheinen mir da zu passen. undefined? Könnte sein, auch wenn das Ergebnis doch ein definiertes Verhalten zeigt.

[Rolf B]

Hallo Manuell,

grid-template setzt -rows, -columns und -areas. Steht im Referenz-Artikel im Wiki, auch bei MDN.

grid-auto-flow steht per Default auf rows. Du sagst damit „wie“, nicht „ob“.

Wenn sich Griditems überlappen, ist der Auto-Flow unschuldig. Grid tut sowas nur auf explizite Anforderung hin.

Rolf

[Manuell]

Die Shorthands sehen das aber anders. Ob sie grid-auto-rows nun auf null, undefined oder unset setzen, weil ich nicht: man sieht ja an soche Stellen schlecht hin.

Aber: kaum habe ich hinter

	grid-template: "dl dt" / 1fr 2fr;

ein

	grid-auto-flow: row;

gesetzt, schon kleben die Elemente nicht mehr aufeinander sondert erscheinen da, wo es bei der „Landhand-Deklaration“ (ohne grid-auto-flow) auch passiert.

(Dieses Aufeinanderkleben spräche IMO für etwas wie grid-auto-flow: none)

Bliebe natürlich die Möglichkeit, daß das so eigentlich falsch, ein Firefox-Problem ist?

Und ja: grid-auto-flow wird geschildert. Dummerweise aber (jedenfalls auf MDN) nicht bei den Grid-Shorthands.

[Rolf B]

Hallo Manuell,

Bliebe natürlich die Möglichkeit, dass...

du uns dein html+css hinreichend ausführlich zeigst, das sich seltsam verhält?

Mir fallen aber noch zwei Dinge auf.

• du gibst keine Höhe für die Row an. Die Angabe sollte hinter "dl dt" stehen, im Zweifelsfall auto. Ich weiß nicht und kann zur Zeit nicht probieren, ob man das weglassen darf.

• du nennst deine Gridbereiche dl und dt. Welchen Elementen in HTML ordnest du diese Areanamem zu? dl ist normalerweise das Elternelement von dt, die können nicht gleichberechtigt im Grid sein

Rolf

[Manuell]

Beispiel? Es gab einige davon. Im Wesentlichen sah es zunächst so (ähnlich) aus:

dl {
	display: grid;
	grid-template:
		"dl dt"
	/ 1fr 2fr;
	…
}

Auch ein grid-auto-rows: auto; hing da gelegentlich mit drin.

Das Ergebnis (auch mit grid-template-areas) war jedesmal eine „einzeilige Tabelle“, in der die Zellen ab dem dritten Grid-Element mit jedem Eintrag unleserlicher wurden. Weil die Elemente mit transparentem Hintergrund übereinander gelegt wurden.

Also habe ich daraus, bevor ich grid-autoflow gefunden habe, daraus so etwas gemacht:

dl {
	display: grid;
	grid-template-columns: [dl-start] 1fr [dl-end dt-start] 2fr [dt-end];
…
}

Damit und ohne jede weitere Änderung, sowohl HTML als auch CSS, wurde das Grid „richtig tabelarisch“ und bestand nicht darauf, ein Einzeiler zu sein.

Und nach dem Fund der vermißten Eigenschaft, da sieht es so aus:

dl {
	display: grid;
	grid-template:
		"dl dt"
	/ 1fr 2fr;
	grid-auto-flow: row;
…
}

und funktioniert eben auch wie gewünscht.

Und wenn der Unterschied zwischen den beiden grid-template-Varianten alleine das grid-auto-flow ist, dann kann ich nicht glauben, daß der Rest dafür verantwortlich sein soll. Schließlich wäre das, was die Auto-Rows dann abstellen würde, auch in den grid-template-columns-Versionen an gleicher Stelle vorhanden.

[Matthias Scharwies]

Servus!

Im Wesentlichen sah es zunächst so (ähnlich) aus:

dl {
	display: grid;
	grid-template:
		"dl dt"
	/ 1fr 2fr;
	…
}

Rolf schrub dir schon, dass dl und dt nicht passt.

Mit deinem Code baust du ein Grid mit 1 Zeile und 2 Spalten.

+----+----+
| dl | dt |
+----+----+

Die weiteren <dt>- und <dd>-Elemente müssen in implizite Zeilen eingefügt werden.

Lösung:
Bei grid-template-columns: 1fr 2fr; werden nur die Spalten festgelegt.

Die Zeilen entstehen vollständig implizit:

dt  dd
dt  dd
dt  dd
...

---

keine Lösung:
grid-auto-flow: row; ist Default-Wert, er sollte nix ändern oder richtigstellen; es sei denn du hattest das vorher mal auf column oder dense gesetzt.

Wenn du eine dl im Grid Laoyut formatieren willst, schau Dir mal das an:

• HTML/Tutorials/Textauszeichnung#Kontaktadressen_im_Grid_Layout

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@Manuell

Beispiel? Es gab einige davon. Im Wesentlichen sah es zunächst so (ähnlich) aus:

Ich denke, die Beurteilung, was wesentlich ist und was nicht, solltest du besser uns überlassen.

dl {
	display: grid;
	grid-template:
		"dl dt"
	/ 1fr 2fr;
	…
}

Damit deklarierst du ein Grid mit 2 Spalten und einer Zeile.

Vermutlich machst du auch noch

dt { grid-area: dl }
dd { grid-area: dt }

(Dass die Spalten nicht klug benannt sind, kam ja schon zur Sprache.)

Dann passiert das:

Das Ergebnis (auch mit grid-template-areas) war jedesmal eine „einzeilige Tabelle“, in der die Zellen ab dem dritten Grid-Element mit jedem Eintrag unleserlicher wurden. Weil die Elemente mit transparentem Hintergrund übereinander gelegt wurden.

Ja! Was erwartest du auch anderes, wenn du ein einzeiliges Grid deklarierst?

---

Also habe ich daraus, bevor ich grid-autoflow gefunden habe, daraus so etwas gemacht:

dl {
	display: grid;
	grid-template-columns: [dl-start] 1fr [dl-end dt-start] 2fr [dt-end];
…
}

Damit und ohne jede weitere Änderung, sowohl HTML als auch CSS, wurde das Grid „richtig tabelarisch“ und bestand nicht darauf, ein Einzeiler zu sein.

Wie sollte auch? Hier machst du ja keinerlei Angabe zu Zeilen, sondern nur zu Spalten.

---

Und nach dem Fund der vermißten Eigenschaft, da sieht es so aus:

dl {
	display: grid;
	grid-template:
		"dl dt"
	/ 1fr 2fr;
	grid-auto-flow: row;
…
}

und funktioniert eben auch wie gewünscht.

Nein, wovon man sich in meinem Codepen leicht überzeugen kann. grid-auto-flow: row hat keinerlei Einfluss.

Wenn das bei dir eine Änderung hervorruft, liegt das an dem von dir nicht gezeigtem Code. Erwähnte ich schon, dass es unklug ist, den Code nicht zu zeigen?

🖖 Live long and prosper

[Manuell]

a) Ja, die Benennung war nicht gut. Allerdings „nur“ die Folge von dran herumbasteln um zu sehen, was da möglicherweise etwas bewirkt. Und „hier“ hat sie den Vorteil, daß sie kompakt ausfällt. (Das dl war dann eigentlich ein richtiger Fehler, hatte aber an der Stelle keine Auswirkungen.)

b) Daß da zunächst ein „Einzeiler“ gebaut wurde, ist und war mir schon klar. Aber die Frage hier war ja: „wie bezwinge ich die nicht gewollten Shorthand-Eigenschaften“.

Mittlerweile ist ja klar, daß (s.u.) bei mir `grid-auto-flow˚ „unter dem Radar flog“.

[Gunnar Bittersmann]

@@Manuell

Aber die Frage hier war ja: „wie bezwinge ich die nicht gewollten Shorthand-Eigenschaften“.

Die Antwort ist so simpel! Wenn die Shorthand-Eigenschaft Dinge setzt, die du nicht willst, dann verwendest du die Shorthand-Eigenschaft nicht.

Wenn du bei einem Element nur den Abstand oben und unten verändern willst, dann nimmst du ja auch nicht margin und überlegst verzweifelt, welches der passende Wert für die Inline-Richtung wäre, sondern du verwendest margin-block.

So einfach ist CSS.

🖖 Live long and prosper

[Manuell]

Wenn du bei einem Element nur den Abstand oben und unten verändern willst, dann nimmst du ja auch nicht margin und überlegst verzweifelt, welches der passende Wert für die Inline-Richtung wäre, sondern du verwendest margin-block

Schon. Aber wenn ich (fast) alle Eigenschaften setzen will bis auf eine (oder so), dann schreibe ich ja auch (z.B.) lieber

border: var(--BSize) var(--BColor) var(--BStyle);
border-bottom: …

als

border-top: var(--BSize) var(--BColor) var(--BStyle);
border-left: var(--BSize) var(--BColor) var(--BStyle);
border-right: var(--BSize) var(--BColor) var(--BStyle);
border-bottom: …

[Gunnar Bittersmann]

@@Rolf B

• du gibst keine Höhe für die Row an. Die Angabe sollte hinter "dl dt" stehen, im Zweifelsfall auto. Ich weiß nicht und kann zur Zeit nicht probieren, ob man das weglassen darf.

„2 Stunden ausprobieren können Ihnen 10 Minuten Handbuchlesen sparen.“ — Linda (Zitat 231)

Aber mal mit Handbuchlesen versuchen: MDN oder gleich in der Spec: <track-size>?

Das ? steht nicht für „weiß man nicht so genau“. 😆

🖖 Live long and prosper

[Manuell]

Nur als Kommentar zu „MDN nachlesen“: Netterweise erscheint auf gerade dieser Seite, in eigentlichen Inhalt, auch kein grid-auto-flow. Dafür aber öfter mal ein none.

Meine Vermutung(!) daß „so etwas“ (oder eben ein none) zugeschlagen hat, ist damit zumindest nicht widerlegt.

[Gunnar Bittersmann]

@@Manuell

Meine Vermutung(!) daß „so etwas“ (oder eben ein none) zugeschlagen hat, ist damit zumindest nicht widerlegt.

Solange du deinen Code nicht zeigst, kann man deine Vermutungen weder widerlegen noch bestätigen.

Mit anderen Worten: Deine Vermutungen gehen mir am Allerwertesten vorbei.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

Aber mal mit Handbuchlesen versuchen:

hab ich doch. Aber die Syntaxbeschreibung dieser Eigenschaft ist dermaßen wild, dass ich am Handy aufgegeben habe.

Vielleicht ists am großen Bildschirm lesbarer…

Nur eins ist klar: grid-auto-flow wird von grid-template nicht beeinflusst. Und da unser lieber TO sich weigert, ein konkretes und vollständiges Onlinebeispiel zu erstellen, das das Fehlverhalten demonstriert, kommen wir hier auch nicht weiter.

Rolf

[Manuell]

… grid-auto-flow wird von grid-template nicht beeinflusst …

Dann ist’s wohl Magie. Wenn der Unterschied macht zwischen „machts nicht“ und „machts“, jedes Mal, alleine aus dieser einen kleinen zusätzlichen Zeile besteht:

/* 👎 */
grid-template: "a b c" / 1fr 2fr 5fr;

/* 👌🏽 */
grid-template: "a b c" / 1fr 2fr 5fr;
grid-auto-flow: row;

Für mich steht jedenfalls fest: grid-template und grid-template-areas setzen grid-auto-flow (und andere Grid-Eigenschaften) auf „irgendwas“ (vmtl. none).

[Manuell]

BTW:

/* 👎 */
grid-auto-flow: row;
grid-template: "a b c" / 1fr 2fr 5fr;

[Rolf B]

Hallo Manuell,

Fakt ist: Die Sammeleigenschaft grid-template setzt laut Spezifikation grid-auto-flow nicht. Es gibt eine Supersammeleigenschaft grid, die grid-template beinhaltet und grid-auto-flow mit setzen kann.

Es könnte also ein Firefox-Bug sein. KÖNNTE. Aber selbst wenn – es müsste grid-auto-flow auf seinen Defaultwert setzen und der ist row.

Damit steht für mich jedenfalls fest: Du lässt uns mit deinen Detailmeldungen schmoren und rückst mit dem vollständigen Code, der den Fehler reproduziert, nicht raus. Es macht Dir offenbar Spaß, uns zu zanken. Kann ich auch

Thread Closed

Rolf

[Gunnar Bittersmann]

@@Manuell

Uns deinen Code zu zeigen.

Nun, es gibt nicht „das“ Beispiel. Bisher ist es mir jedes Mal …“ — war der Anfang meiner Antwort.

„Es gibt nicht ‚das‘ Beispiel“ als Antwort auf „uns deinen Code zu zeigen“ ist wohl nicht besonders klug.

Und ich halte es auch nicht für besonders klug, seine Zeit damit zu verplempern, sich trotzdem mit deinen Problemen (oder Troll-Postings?) abzugeben.

🖖 Live long and prosper

[Manuell]

„Es gibt nicht ‚das‘ Beispiel“ heißt nicht „Es gibt nicht das Beispiel“.

Will sagen: zu dem Zeitpunkt hatte ich einen Sack voller unterschiedlicher Versuche mit den Shorthands, kombiniert mit verschiedensten grid-template-… Kombinationen, zum Thema unternommen. Das Problem blieb dabei das gleiche. Nur der Verzicht auf die Shorthands bracht das gewünschte Ergebnis. (Und „irgend jemand“ hat mir hier ja auch erklärt, daß das, so, ganz normal wäre.)

Immerhin fand ich, angeregt durch die Beiträge hier, doch noch zum 'grid-auto-flow'. Und habe hier dann eigentlich nur noch konsterniert, daß es eben dies war, was mir gefehlt hat.