Lesetipp: Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers

[Matthias Scharwies]

Servus!

Grad auf css-tricks gefunden:

Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers von Temani Afif on Aug 1, 2022

tl;dr

Dieses Beispiel (eine solche Bildergalerie benötigt nur 2 Regelsätze!) hab ich gleich hier integriert:

• CSS/Tutorials/Grid/mehrspaltige_Layouts
  • der Titel ist ein Überbleibsel aus der floats-Zeit
  • Der Artikel soll ein Show-Case für typische use-cases zeigen
  • verlinkt immer wieder auf's Grid-Tutorial

Langfristig müsste man diesen Kurs immer wieder mal durchchecken.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

der html_beautifier in Frickl ist die Hölle - er klatscht die img Elemente nebeneinander und bricht auch nach den 80 vorgegebenen Stellen nicht um. Das Ergebnis ist unlesbar. Ich habe im Testwiki mal - per DevTools - an seinen Optionen geschraubt: Wenn man preserve_newlines einschaltet und auch max_preserve_newlines auf bspw. 1 setzt, ist es besser. Wir sollten dringend bereden, ob wir den Beautifier brauchen.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

der html_beautifier in Frickl ist die Hölle - er klatscht die img Elemente nebeneinander und bricht auch nach den 80 vorgegebenen Stellen nicht um. Das Ergebnis ist unlesbar. Ich habe im Testwiki mal - per DevTools - an seinen Optionen geschraubt: Wenn man preserve_newlines einschaltet und auch max_preserve_newlines auf bspw. 1 setzt, ist es besser.

Mir auch aufgefallen. War aber nicht immer so, oder?

Wir sollten dringend bereden, ob wir den Beautifier brauchen.

Eigentlich sollten unsere Beipiele ja schon übersichtlich notiert sein. Wie würde das Markup denn ohne aussehen?

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

War aber nicht immer so, oder?

Keine Ahnung ob Felix den Beautifier irgendwann hinzugefügt hat. Es ist jetzt bei dem Beispiel besonders pathologisch, weil da mehrere img Tags drin stehen. Das sind inline-Elemente und da entfernt das Ding einfach die Zeilenumbrüche. Deswegen sieht's so schrecklich aus. Blockelementen setzt er von sich aus auf eigene Zeilen.

Wie würde das Markup denn ohne aussehen?

1:1 so wie in der Beispiel-Datei.

Rolf