Grid: englische, bzw. deutsche Fachtermini

[Matthias Scharwies]

Servus!

Ich arbeite mich grad durch CSS-Grid Layout.

Wie würdet ihr folgende Fachbegriffe übersetzen?

• grid lines: Rasterlinien

• gutter: wörtlich: Rinnen, heißt das im Grafikdesign wirklich so?

• grid area: wörtlich: Rasterbereich, Übersetzung verwenden oder hier lieber den englischen Begriff beibehalten? Auch bei Grid Item würde ich auf eine Übersetzung verzichten.

• track lines: ???

Herzliche Grüße

Matthias Scharwies

[Rolf b]

Hallo Matthias,

meine Meinung: wenn Du übersetzt, dann auch konsequent. Oder gar nicht. Wenn Du von Rasterlinien in der grid area sprichst, klingt das merkwürdig. Rasterbereich und Rasterelement ist doch in Ordnung.

Gutter wird im englischen wohl tatsächlich verwendet, es bezeichnet den Abstand des Inhalts vom Rand oder den Abstand zweier Inhalte. Im Deutschen würde ich deshalb ggf. unterschiedliche Begriffe nutzen - Zeilenabstand, Spaltenabstand, Bundsteg, Randabstand - allgemein Abstand.

grid und track lines: Tjaaa. MDN sagt:

Grid lines are created when you define tracks
A grid track is the space between two grid lines.

Klingt irgendwie rekursiv^[1] 😂. Die Grid Lines begrenzen die Tracks, und die Tracks sind die Bereiche, in denen die Elemente des Grids angeordnet sind. Du positionierst Grid Items anhand der Grid Line Nummern oder Namen. Grid Lines sind aber, wenn ich das richtig verstehe, nichts was dargestellt wird, sondern nur eine Begrifflichkeit zur Angabe der Item-Position.

Track Line - wenn ich das google, finde ich Bilder über Tartanbahnen mit den Linien, die die Laufbahnen der Teilnehmer begrenzen. Ich glaube fast, grid und track lines sind synonym. Oder irgendwer hat den Begriff benutzt, um die Grenzen zwischen den Grid-Elementen optisch hervorzuheben. Dann wären es Begrenzungslinien.

Rolf

---

1. Siehe auch: rekursiv. ↩︎

[TS]

Hello,

track line | Fanglinie

Da rastet das Element ein, oder? Die Praxis würde meine These belegen können, aber nicht auf dem Tablet. Das ist mir zuviel Stress :-)

Liebe Grüße
Tom S.

[Felix Riesterer]

Lieber Matthias,

Wie würdet ihr folgende Fachbegriffe übersetzen?

so:

• grid lines: Rasterlinien

Gitterlinien

• gutter: wörtlich: Rinnen, heißt das im Grafikdesign wirklich so?

Spaltenzwischenraum

• grid area:

Gitterbereich

Grid Item

Element mit Gitter-Layout

würde ich auf eine Übersetzung verzichten.

Grundsätzlich würde ich diese Fachtermini als eben solche benutzen. Eine Übersetzung würde ich nur in einem erklärenden Absatz für besseres Verständnis verwenden, um im Folgenden wieder das englische Fachwort einzusetzen.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer

• grid lines: Rasterlinien

Gitterlinien

Ich finde „Rasterlinien“ besser. Natürlich sollte man auch schon grid mit „Raster“ („Rastersystem“, „Gestaltungsraster“) übersetzen, nicht mit „Gitter“.

• gutter: wörtlich: Rinnen, heißt das im Grafikdesign wirklich so?

Spaltenzwischenraum

Das trifft es nicht, da mit gutter auch Zwischenräume in vertikaler Richtung gemeint sind.

Grid Item

Element mit Gitter-Layout

Nein. Wenn dann müsste es „im“ heißen, nicht „mit“. Zu „Gitter-“ s.o.

würde ich auf eine Übersetzung verzichten.

Grundsätzlich würde ich diese Fachtermini als eben solche benutzen. Eine Übersetzung würde ich nur in einem erklärenden Absatz für besseres Verständnis verwenden, um im Folgenden wieder das englische Fachwort einzusetzen.

Kann man in dem Fall auch machen. Insbesondere, weil Webentwickler ja ständig mit englischsprachigen Artikeln konfrontiert sind, also die englischen Begriffe draufhaben sollten.

LLAP 🖖

[Gunnar Bittersmann]

@@Matthias Scharwies

• grid lines: Rasterlinien

Ja.

• gutter: wörtlich: Rinnen, heißt das im Grafikdesign wirklich so?

Steg, s.a. https://de.wikipedia.org/wiki/Gestaltungsraster

• grid area: wörtlich: Rasterbereich

Bereich im Raster?

Auch bei Grid Item würde ich auf eine Übersetzung verzichten.

Rasterelement? Element im Raster?

• track lines: ???

Was soll das sein?

LLAP 🖖

[Matthias Scharwies]

Servus!

Servus!

Ich arbeite mich grad durch CSS-Grid Layout.

Vielen Dank für Euren Input. Es ist noch bei Weitem nicht fertig, aber zumindest ein Anfang:

• CSS/Eigenschaften/grid

• CSS/Anwendung_und_Praxis/Layout_mit_Grid

Ich mach die Tage noch'ne SVG-Grafik und versuche mich an einem Beispiel für content-fit().

Wenn irgendjemand andere Anwendungsfälle als das 3-Spalten-Layout hat, immer her damit.

Da man die Rasterbereiche auch übereinander haben kann, wäre evtl. eine Bildergalerie ganz nett.

Herzliche Grüße

Matthias Scharwies

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

• CSS/Anwendung_und_Praxis/Layout_mit_Grid

halte ich für ziemlichen Unsinn. CSS Grid, um damit wieder ein 12-Spalten-Raster zu bauen‽ Fail. Dann kann man auch bei Bootcrap bleiben.

Wenn irgendjemand andere Anwendungsfälle als das 3-Spalten-Layout hat, immer her damit.

Das eine oder andere. Aber genügen dir die Beispiele von Rachel Andrew nicht?

LLAP 🖖

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

• CSS/Anwendung_und_Praxis/Layout_mit_Grid

halte ich für ziemlichen Unsinn. CSS Grid, um damit wieder ein 12-Spalten-Raster zu bauen‽ Fail. Dann kann man auch bei Bootcrap bleiben.

Habe in der letzten Zeit einiges mit InDesign gemacht. Da kommen in den Tutorials auch 12 Spalten als Grundgerüst vor. Andererseits will ich das Bsp. auch nicht komplexer machen, sodass man es auch reduzieren könnte. Auch die Werte für grid-row könnte man vereinfachen - zumindest bis man sie in grid-area zusammenfasst.

Was danach fehlt, ist ein Bsp. Mit benannten Rasterlinien.

Wenn irgendjemand andere Anwendungsfälle als das 3-Spalten-Layout hat, immer her damit.

Das eine oder andere.

Danke

Aber genügen dir die Beispiele von Rachel Andrew nicht?

Die sind geil, aber wir wollen ja eigentlich immer was mit Inhalt und sinnvollen Markup. Das nervt mich schon, dass 80% aller Bsp. aus x divs anstelle von header, nav, etc bestehen.

Was mich noch interessieren würde, wäre ein Demo mit viel Weißraum, der mit align-justify, align-self, grid-gap etc realisiert wird. EVTL. eine Webvisitenkarte?

LLAP 🖖

Herzliche Grüße

Matthias Scharwies