Responsiveness ohne Breakpoints

So lernst du am meisten mit diesem Cloneable

Um das Beste aus diesem Cloneable herauszuholen, experimentiere am besten aktiv mit den Einstellungen und erlebe selbst, wie die Layouts interagieren:

• Browser-Fenster verkleinern: Ändere die Fenstergröße und beobachte, wie sich das Layout automatisch anpasst.
• Schriftgröße im Browser ändern: Passe die Browser-Schriftgröße an, um zu sehen, wie sich die Elemente verhalten.
• Website zoom: Zoome hinein und hinaus, und prüfe, wann die Layouts skalieren.

So sind die dynamischen Layouts umgesetzt

Flex-child‍

Der ^{.pb_flex_outside-wrapper} verwendet Flexbox mit der Wrap-down Option, während die Child-Elemente ^.x_card die Eigenschaften flex-grow, flex-shrink und flex-basis haben. Das ermöglicht die elastischen Fähigkeiten und das automatische Umbrechen unter 23em Breite.

Grid‍

Das Grid^{.pb_grid_outside-wrapper} hat grid-template-columns in den Custom Properties angewendet. Dabei füllt der Code repeat(auto-fill, minmax(23em, 1fr)) die gesamte Breite des Grids automatisch mit Spalten, wobei jede mindestens 23em breit ist,  aber flexibel auf den verfügbaren Raum (1fr) wachsen kann.

Container-type‍

Die Karten ^.x_card haben container-type: inline-size in den Custom Properties eingestellt. Im Code-Embed ^{.pb_query_custom-code} ist das CSS-Verhalten für Klassen basierend auf verschiedenen Container-Breiten (z. B. via @container (min-width: 50em)) definiert.