tag:forum.selfhtml.org,2005:/self Unterschiede: grid-column: 1 / 6; grid-column: 1 / span 5; – SELFHTML-Forum 2020-03-14T18:35:09Z https://forum.selfhtml.org/self/2020/mar/13/unterschiede-grid-column-1-6-grid-column-1-span-5/1767048?srt=yes#m1767048 michaah 2020-03-13T21:35:45Z 2020-03-13T21:35:45Z Unterschiede: grid-column: 1 / 6; grid-column: 1 / span 5; <p>Ich habe mir zusammengereimt was wohl "span" als Option in einem gridlayout bedeutet, ein scharfes Verständnis davon habe ich nicht.</p> <p>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.</p> <p>Ähnliches gilt für "grid-row: 1 / auto;" und "grid-row: 2;" Ob ich da auto schreibe oder nicht bleibt sich doch gleich?</p> <p>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.</p> https://forum.selfhtml.org/self/2020/mar/13/unterschiede-grid-column-1-6-grid-column-1-span-5/1767049?srt=yes#m1767049 Rolf B 2020-03-13T21:45:41Z 2020-03-13T21:45:41Z Unterschiede: grid-column: 1 / 6; grid-column: 1 / span 5; <p>Hallo michaah,</p> <p>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.</p> <p>Außer in unserem Wiki findest Du auch Texte im Mozilla Developer Network: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row" rel="nofollow noopener noreferrer">grid-row bei MDN</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/mar/13/unterschiede-grid-column-1-6-grid-column-1-span-5/1767051?srt=yes#m1767051 Matthias Scharwies mscharwies@selfhtml.org 2020-03-14T05:25:19Z 2020-03-14T05:29:33Z Unterschiede: grid-column: 1 / 6; grid-column: 1 / span 5; <p>Servus!</p> <blockquote> <p>Ich habe mir zusammengereimt was wohl "span" als Option in einem gridlayout bedeutet, ein scharfes Verständnis davon habe ich nicht.</p> </blockquote> <p>Ich habe jetzt ein bisschen ein schlechtes Gewissen, weil ich das Tutorial im März 2017 mit der heißen Nadel gestrickt hatte.</p> <p>Ich habe es jetzt um einen Absatz mit einigen Syntax-Beispielen und -Erklärungen erweitert:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Grid-Items#Anfangs-_und_Endlinien_festlegen" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid/Grid-Items#Anfangs-_und_Endlinien_festlegen</a></li> </ul> <blockquote> <p>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.</p> </blockquote> <p>Wie <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> schon sagte, sind diese Werte gleich; interessanter wäre "grid-column: span 5;", da dort der Anfang nicht festgelegt wird.</p> <blockquote> <p>Ähnliches gilt für "grid-row: 1 / auto;" und "grid-row: 2;" Ob ich da auto schreibe oder nicht bleibt sich doch gleich?</p> </blockquote> <p>Ja! Ich habe jetzt unter das Frickl hinzugefügt:</p> <pre><code class="block language-html">{{Empfehlung| Verändern Sie die Werte für grid-column und grid-row und beobachten Sie die Veränderungen.}} </code></pre> <blockquote> <p>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.</p> </blockquote> <p>Oben gab es einen <a href="https://wiki.selfhtml.org/wiki/Referenz:CSS/Eigenschaften/grid-column" rel="nofollow noopener noreferrer">Link auf die Referenz</a>, was natürlich nicht optimal ist. Deshalb habe ich habe den Absatz hinzugefügt.</p> <p>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.</p> <p>Ziel ist es, (fast) alles den Browser machen zu lassen. Im vorletzten Kapitel gibt es dort Beispiele:</p> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries</a></p> <p>Nur ein englischer Link, den ich gestern gefunden habe:</p> <ul> <li>css-tricks.com: <a href="https://css-tricks.com/responsive-grid-magazine-layout-in-just-20-lines-of-css/" rel="nofollow noopener noreferrer">Responsive Grid Magazine Layout in Just 20 Lines of CSS </a></li> </ul> <p>Bitte gib auch in den nächsten Kapiteln Feedback, wenn etwas nicht gut erklärt ist.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> 25 Jahre SELFHTML → <strong><a href="https://forum.selfhtml.org/events/4" rel="noopener noreferrer">SELF-Treffen 05.-07. Juni 2020</a></strong> in <strong>Mannheim</strong> </div> https://forum.selfhtml.org/self/2020/mar/13/unterschiede-grid-column-1-6-grid-column-1-span-5/1767058?srt=yes#m1767058 Matthias Scharwies mscharwies@selfhtml.org 2020-03-14T08:03:20Z 2020-03-14T08:03:20Z Überarbeitet: benannte Linien und Rasterbereiche <p>Servus!</p> <p>Das Kapitel: <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/benannte_Linien_und_Rasterbereiche" rel="nofollow noopener noreferrer">benannte Linien und Rasterbereiche</a> ist jetzt auch überarbeitet.</p> <p>Bitte durchlesen und, wenn nötig, verbessern!</p> <p>Wünschenswert wären fertige Beispiele aus der Praxis! Hat da jemand irgendetwas?</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> 25 Jahre SELFHTML → <strong><a href="https://forum.selfhtml.org/events/4" rel="noopener noreferrer">SELF-Treffen 05.-07. Juni 2020</a></strong> in <strong>Mannheim</strong> </div> https://forum.selfhtml.org/self/2020/mar/13/unterschiede-grid-column-1-6-grid-column-1-span-5/1767050?srt=yes#m1767050 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-03-14T05:06:12Z 2020-03-14T05:06:30Z Unterschiede: grid-column: 1 / 6; grid-column: 1 / span 5; <p>@@Rolf B</p> <blockquote> <p>Außer in unserem Wiki findest Du auch Texte im Mozilla Developer Network: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row" rel="nofollow noopener noreferrer">grid-row bei MDN</a></p> </blockquote> <p>Dort auch nicht nur schnöde Doku, sondern auch <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids" rel="nofollow noopener noreferrer">Tutorial</a> (geschrieben von Rachel Andrews, IIRC).</p> <p>Und eine <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grid_skills" rel="nofollow noopener noreferrer">interaktive Probierwiese</a> (sowas wie <a href="https://cssgridgarden.com/" rel="nofollow noopener noreferrer">Grid Garden</a>, nur trocken (ohne Wasser) und ohne Mohrrüben).</p> <p>Und dann ist da noch Jen Simmons’ YouTube-Kanal <a href="https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag" rel="nofollow noopener noreferrer">Layout Land</a>.</p> <p>LLAP </p> <div class="signature">-- <br> Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an. </div> https://forum.selfhtml.org/self/2020/mar/13/unterschiede-grid-column-1-6-grid-column-1-span-5/1767062?srt=yes#m1767062 Rolf B 2020-03-14T10:16:32Z 2020-03-14T10:16:32Z Überarbeitet: benannte Linien und Rasterbereiche <p>Hallo Matthias,</p> <p>ich will das jetzt nicht einfach editieren weil ich mir nicht sicher bin, was das Beste ist.</p> <p>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".</p> <p>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 ?</p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/mar/13/unterschiede-grid-column-1-6-grid-column-1-span-5/1767063?srt=yes#m1767063 Matthias Scharwies mscharwies@selfhtml.org 2020-03-14T10:48:54Z 2020-03-14T10:52:11Z Überarbeitet: benannte Linien und Rasterbereiche <p>Servus!</p> <blockquote> <p>Hallo Matthias,</p> <p>ich will das jetzt nicht einfach editieren weil ich mir nicht sicher bin, was das Beste ist.</p> </blockquote> <p>Ich auch nicht!</p> <blockquote> <p>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".</p> </blockquote> <p>Das von mir übernommene Beispiel (<a href="https://gedd.ski/post/naming-css-grid-lines/" rel="nofollow noopener noreferrer">https://gedd.ski/post/naming-css-grid-lines/</a>) war so aufgebaut.</p> <p>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.</p> <blockquote> <p>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 ?</p> </blockquote> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> [outer-start] 1fr [center-start] 2fr [center-end footer-start] 1fr [footer-end outer-end]<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> [top] 1fr 1fr 1fr [bottom]<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">footer</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> footer-start / footer-end<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 3 / bottom<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Ne, das ist nicht irrtümlich, sondern so gewollt. </p> <p>Ein footer kann auch rechts unten sein.</p> <p>Von einem Frickl-Beispiel habe ich da aber Abstand genommen.</p> <p>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.</p> <blockquote> <p>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).</p> </blockquote> <p>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.</p> <blockquote> <p>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.</p> </blockquote> <p>Ok, stimmt - da überlege ich noch einmal.</p> <p>Grid ist ungeheuer umfangreich - viele Anwendungen (so auch die von mir anfangs verwendeten ASCII-Schemata) sind im Real Life imho aber doch eher unpraktisch.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> 25 Jahre SELFHTML → <strong><a href="https://forum.selfhtml.org/events/4" rel="noopener noreferrer">SELF-Treffen 05.-07. Juni 2020</a></strong> in <strong>Mannheim</strong> </div> https://forum.selfhtml.org/self/2020/mar/13/unterschiede-grid-column-1-6-grid-column-1-span-5/1767079?srt=yes#m1767079 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-03-14T17:24:08Z 2020-03-14T19:35:06Z Überarbeitet: benannte Linien und Rasterbereiche <p>@@Rolf B</p> <blockquote> <p>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.</p> </blockquote> <p>Was wäre daran inkonsequent?</p> <blockquote> <p>Das sollte - finde ich - semantisch benannt werden. Sowas wie "nav-start", "main-start", "main-end", "infobar-end".</p> </blockquote> <p>Nein. Grid macht hier das <em>Seiten</em>layout. In Bezug auf die <em>Seite</em> sind <em>outer</em> und <em>center</em> durchaus schick.</p> <p>Bei mehr Seiteninhalt würden an diesen Linien noch andere Elemente ausgerichtet sein; da wäre die Benennung nach einem von diesen ziemlich unschick.</p> <p>LLAP </p> <div class="signature">-- <br> Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an. </div> https://forum.selfhtml.org/self/2020/mar/13/unterschiede-grid-column-1-6-grid-column-1-span-5/1767078?srt=yes#m1767078 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-03-14T17:08:20Z 2020-03-14T17:08:20Z Überarbeitet: benannte Linien und Rasterbereiche <p>@@Matthias Scharwies</p> <blockquote> <p>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.</p> </blockquote> <p>Das macht keinen Sinn.</p> <p>Der Vorteil, die vom Standard vorgesehenen Benennungen <code><name>-start</code> und <code><name>-end</code> zu verwenden, ist doch, dass man dann <code>grid-column: <name></code>, <code>grid-row: <name></code> (ja, auch das!) sowie <code>grid-area: <name></code> schreiben kann.</p> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/XWbEOxz?editors=0100" rel="noopener noreferrer">Beispiel</a></p> <p>LLAP </p> <div class="signature">-- <br> Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an. </div> https://forum.selfhtml.org/self/2020/mar/13/unterschiede-grid-column-1-6-grid-column-1-span-5/1767080?srt=yes#m1767080 Rolf B 2020-03-14T17:31:57Z 2020-03-14T17:31:57Z Überarbeitet: benannte Linien und Rasterbereiche <p>Hallo Gunnar,</p> <p>moment - diese -start/-end Notation der Line-Namen ist nicht einfach good practice, sondern hat vom Browser interpretierte Semantik?</p> <p><code>grid-column: foo;</code> 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?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/mar/13/unterschiede-grid-column-1-6-grid-column-1-span-5/1767081?srt=yes#m1767081 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-03-14T18:17:57Z 2020-03-14T18:17:57Z Überarbeitet: benannte Linien und Rasterbereiche <p>@@Rolf B</p> <blockquote> <p>moment - diese -start/-end Notation der Line-Namen ist nicht einfach good practice, sondern hat vom Browser interpretierte Semantik?</p> </blockquote> <p>Ja.</p> <blockquote> <p><code>grid-column: foo;</code> sucht in den Spalten nach den Line-Names foo-start und foo-end?</p> </blockquote> <p>So ist es.</p> <blockquote> <p>Das lese ich aus der Spec überhaupt nicht raus. Wo steht das?</p> </blockquote> <p>In <a href="https://drafts.csswg.org/css-grid/#implicit-named-areas" rel="nofollow noopener noreferrer">§ 7.3.3</a>. Siehe auch § 7.3.2 darüber.</p> <p>LLAP </p> <div class="signature">-- <br> Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an. </div> https://forum.selfhtml.org/self/2020/mar/13/unterschiede-grid-column-1-6-grid-column-1-span-5/1767082?srt=yes#m1767082 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-03-14T18:23:47Z 2020-03-14T19:17:35Z Überarbeitet: benannte Linien und Rasterbereiche <p>@@Gunnar Bittersmann</p> <blockquote> <blockquote> <p>Das lese ich aus der Spec überhaupt nicht raus. Wo steht das?</p> </blockquote> <p>In <a href="https://drafts.csswg.org/css-grid/#implicit-named-areas" rel="nofollow noopener noreferrer">§ 7.3.3</a>. Siehe auch § 7.3.2 darüber.</p> </blockquote> <p>Es steht übrigens auch durch gelbe Kästen hervorgehoben in den Beschreibungen sowohl von <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column" rel="nofollow noopener noreferrer">grid-column</a> als auch von <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row" rel="nofollow noopener noreferrer">grid-row</a> in MDN.</p> <p>Aber wenn ich hier erwähne, dass es bessere Quellen als das SELFHTML-Wiki gibt, dann bin ich der Böse. ‍♂️</p> <p>LLAP </p> <div class="signature">-- <br> Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an. </div> https://forum.selfhtml.org/self/2020/mar/13/unterschiede-grid-column-1-6-grid-column-1-span-5/1767083?srt=yes#m1767083 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-03-14T18:35:09Z 2020-03-14T18:35:09Z Überarbeitet: benannte Linien und Rasterbereiche <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Aber wenn ich hier erwähne, dass es bessere Quellen als das SELFHTML-Wiki gibt, dann bin ich der Böse. ‍♂️</p> </blockquote> <p>Sonitus facit musica.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div>