_grid.scss problem

[tuxenberger]

Hi Dennis,

ich habe gestern das Update meiner Webseite mit Contao 5.3 und dem Nutshell 2.x beendet und habe beim Vergleich der Seiten einen für mich unschönen Darstellungseffekt festgestellt.

Ich habe ein zweispaltiges Bloglayout. In dem in der linken Spalte ist nur ein Bild, in der rechten Spalte Text der aus Headlline, Teasertext und dem weiterlesen Button besteht. Solange der Text länger ist als das Foto hoch ist, ist alles ok. Wenn der Textbereich aber eine geringere Höhe als das Foto hat werden die Elemente gleichmäßig in der Vertikale verteilt und nicht wie sonst alle oben ausgerichtet.

Ich habe gesehen das in Abweichung zum Nutshell 1.x in der _grid.scss zwei Angaben mit dazugekommen sind.

%column-floating {
grid-column: 1 / -1;

wurde

%column-floating {
display: grid;
grid-column: 1 / -1;
max-width: 100%;

In Zeile 78 werden dann die Col-Classes zusammengebaut wenn ich das richtig sehe.

// column creation
@for $i from 1 through $grid-columns { // [3][4]
.col-#{$current}-#{$i} { // [2][3]
@extend %column-floating;
}
}

Das führt dazu das nun auch diese mit display:grid, formatiert werden. Ändere ich das wieder auf die alte Form ist alles fine.

// column creation
@for $i from 1 through $grid-columns { // [3][4]
.col-#{$current}-#{$i} { // [2][3]
grid-column: 1/-1;
}
}

Viele Grüße, Marcel

[denniserdmann]

Ja, das ist ein Nebeneffekt von display: grid (den man sich aber auch positiv zunutze machen kann, deswegen habe ich es ergänzt). Ich löse das Problem, indem ich align-start innerhalb der Grid-Optionen nutze. Oder du gibst dem Link ein margin-bottom: auto (oder margin-top: auto wenn der Link unten stehen soll).

[tuxenberger]

Edit: Sorry, war im falschen Ticket gelandet :-/

Danke für deine Antwort und die beschrieben Lösungsansätze.

Mein Gedanke dazu: CSS Grid und Flex kommen immer dann zum Einsatz, wenn der "Standard" der Browserdarstellung die gewünschte Ausrichtung/Verteilung von Inhalten nicht hergibt (Ordne Elemente nebeneinander an, verteile Sie...). Es steht immer ein Element unter den Anderen, in der Reihenfolge wie es in Sourcecode steht. Wenn das nicht sein soll fängt man an per zusätzlichem CSS einzugreifen.

Mit der aktuellen Anpassung wird die Änderung aber zur Regel. Ich muss also mehr Aufwand (und CSS) vom Browser verarbeiten und berechnen lassen um wieder auf den Normalfall zurückzukommen (Reset -> Anpassung in nutshell -> Anpassung in Theme). Alternativ fände ich es besser wenn die Anpassung als Option mit einer CSS-Klasse aktiviert wird.

Am Ende bist Du der Entwickler des Frameworks und entscheidest wo es sich hin entwickeln wird. Ich schätze deine Arbeit sehr und hoffe das du meine Gedanken nicht als unberechtigte Kritik auffasst.

[denniserdmann]

Ich gebe dir Recht, dass sich display: grid auch verschieben ließe, dass es nicht standardmäßig ergänzt wird, wenn noch keine Mehrspaltigkeit vorhanden ist. Aber sobald eine individuelle Breite festgelegt wird, soll der Container display:grid bekommen (den Unterschied kannst du in OPTIMIST gut sehen, wenn du display: grid deaktivierst: https://optimist-3.contao-theme.de/#intro)

Für dein oben erwähntes Beispiel würde sich also nichts ändern, es gäbe das Problem weiterhin (aber eben erst ab dem Zeitpunkt, wenn die Inhalte nebeneinander stehen).

Die meiner Meinung nach bessere Lösung für deinen Fall wäre, das News-Template gar nicht um Spalten-Klassen zu ergänzen, sondern stattdessen die Mixins make-row und make-col() zu nutzen. Ein Beispiel findest du im OPTIMIST Theme:

https://github.com/erdmannfreunde/optimist-theme-bundle/blob/3.x/files/theme/scss/components/_news.scss#L30

Dann hast du die volle Kontrolle, kannst also die row erst ab einem bestimmten Viewport starten (in OPTIMIST ab screen-md) und dann auch erst Bild und Text die Grid-Anweisungen geben.

[tuxenberger]

Hallo Dennis, Danke für den Tipp, ich sehe mir das in Optimist an – lerne ja gerne dazu ;-)