@@heinetz > Was meint Ihr? Na, da hast du uns ja ein schönes Rätsel zum Wochenanfang gestellt. Wobei das Rätsel nicht darin besteht umzusetzen, was du willst; sondern darin herauszufinden, was du willst. Ich rate mal: Bei schmalem Viewport sollen manche Elemente (Bilder bspw.) über die volle Breite vom linken bis zum rechten Viewportrand gehen. Andere Elemente (Text) sollen links und rechts Abstand zum Viewportrand haben. Bei breitem Viewport sollen aber alle (Bilder und Texte) dieselbe Maximalbreite haben und horizontal zentriert sein. Dafür brauchst du keine dreifach verschachtelten Elemente. Nur den Container und dessen Kinder. In [meinem Beispiel](https://codepen.io/gunnarbittersmann/pen/aQjEda) sind das: ~~~HTML <figure> <img/> <figcaption>…</figcaption> <footer>…</footer> </figure> ~~~ Mit Grid ist das einfach gemacht: 3 Spalten, die linke und rechte gleich breit, mindestens 1rem (bspw.). Die mittlere Spalte höchtens 40rem (bspw.). Die Spaltenlinien erhalten sprechende Namen: ~~~CSS figure { display: grid; grid-template-columns: [full-start] minmax(1rem, 1fr) [text-start] minmax(auto, 40rem) [text-end] minmax(1rem, 1fr) [full-end]; } ~~~ Bild über volle Breite: ~~~CSS figure > img { grid-column: full; } ~~~ Text im Bereich zwischen den Linien text-start und text-end: ~~~CSS figcaption, figure > footer { grid-column: text; } ~~~ Ab einem Breakpoint wird das Bild auch durch die Linien text-start und text-end begrenzt: ~~~CSS @media (min-width: 42em) { figure > img { grid-column: text; } } ~~~ Fertig.   Anstatt die Breiten der Elemente von außen durch ein Grid festzulegen, kann man auch für die Elemente [Breiten und Außenabstände](https://codepen.io/gunnarbittersmann/pen/XyBzqa) angeben. LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann

@@heinetz > Was meint Ihr? Na, da hast du uns ja ein schönes Rätsel zum Wochenanfang gestellt. Wobei das Rätsel nicht darin besteht umzusetzen, was du willst; sondern darin herauszufinden, was du willst. Ich rate mal: Bei schmalem Viewport sollen manche Elemente (Bilder bspw.) über die volle Breite vom linken bis zum rechten Viewportrand gehen. Andere Elemente (Text) sollen links und rechts Abstand zum Viewportrand haben. Bei breitem Viewport sollen aber alle (Bilder und Texte) dieselbe Maximalbreite haben und horizontal zentriert sein. Dafür brauchst du keine dreifach verschachtelten Elemente. Nur den Container und dessen Kinder. In [meinem Beispiel](https://codepen.io/gunnarbittersmann/pen/aQjEda) sind das: ~~~HTML <figure> <img/> <figcaption>…</figcaption> <footer>…</footer> </figure> ~~~ Mit Grid ist das einfach gemacht: 3 Spalten, die linke und rechte gleich breit, mindestens 1rem (bspw.). Die mittlere Spalte höchtens 40rem (bspw.). Die Spaltenlinien erhalten sprechende Namen: ~~~CSS figure { display: grid; grid-template-columns: [full-start] minmax(1rem, 1fr) [text-start] minmax(auto, 40rem) [text-end] minmax(1rem, 1fr) [full-end]; } ~~~ Bild über volle Breite: ~~~CSS figure img { grid-column: full; } ~~~ Text im Bereich zwischen den Linien text-start und text-end: ~~~CSS figcaption, figure footer { grid-column: text; } ~~~ Ab einem Breakpoint wird das Bild auch durch die Linien text-start und text-end begrenzt: ~~~CSS @media (min-width: 42em) { figure img { grid-column: text; } } ~~~ Fertig.   Anstatt die Breiten der Elemente von außen durch ein Grid festzulegen, kann man auch für die Elemente [Breiten und Außenabstände](https://codepen.io/gunnarbittersmann/pen/XyBzqa) angeben. LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann