Scroll Snap und columns-Layout
bearbeitet von
Servus!
> Hallo zusammen,
>
> vielleicht fällt euch etwas zu folgender Problemstellung ein:
>
> Ein Inhalt variabler Länge wird im CSS mittels fester `column-width` und `column-count: auto;` in eine variable Anzahl von nebeneinander liegenden, gleich großen Spalten aufgeteilt.
Du hast einen Abschnitt mit anscheinend fester Höhe, aber variabler Breite, der bei breiterem Viewport mehr Spalten bildet?
Bei kleinerem Viewport würden weniger Spalten gebildet und der Inhalt würde sich nach unten verteilen.
Das Grundproblem hier ist, dass sich der Abschnitt zwar darstellungsmäßig in `columns` teilt, dies aber im DOM nicht sichtbar ist. Sowohl der Firefox als auch Chrome zeigen zwar Grid und Flex, aber eben keine Möglichkeit, die n-te Spalte von irgendetwas zu selektieren. *Jedenfalls soweit ich weiß.*
* [CSS/Tutorials/Typografie/Spalten](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Typografie/Spalten)
>Wie kann ich `scroll-snap-*` so darauf anwenden, dass jede der automatisch erzeugten Spalten beim horizontalen Scrollen einrastet?
So wie ich das verstanden habe gar nicht.
Du setzt ja [scroll-snap-type](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/scroll-snap-type) für den Scroll-Container, während [scroll-snap-align](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/scroll-snap-align) für die Scroll-**Elemente** genutzt wird. Du hast aber keine Elemente.
> Beziehungsweise wie kann ich die Wirkung von `scroll-snap-*` für diesen Zweck simulieren?
Evtl mal mit [scroll-snap-type](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/scroll-snap-type) proximity experimentieren. Den Inhalt auszumessen und dann auf dynamisch erzeugte Spalten (`<x-column>`) zu verteilen, würde ich nicht machen.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“