@@Jenny > Was mr nicht gelungen ist, die bilder zu zentrieren. Am einfachsten geht das wohl `display: block; margin-inline: auto`. --- > ~~~css,bad > grid-template-columns: 1fr 1fr; > ~~~ Das wurde schon angesprochen, dass das für schmale Viewports nicht funktioniert. Entweder per Media-Query nur ab einer gewissen Mindest-Viewportbreite oder – mein Favorit – mit den Grid-Hausmitteln ```css,good grid-template-columns: repeat(auto-fit, minmax(min(12em, 100%), 1fr)); ``` wobei `12em` hier die beispielhafte Mindestbreite der Spalten ist. Außerdem willst du noch Zwischenraum zwischen den Spalten: bspw. `gap: 4em`. > ~~~css,bad > align-items: center; > justify-content:center; > ~~~ Du willst sicher nicht, dass die Bilder auf unterschiedlicher Höhe stehen. `align-items: center`{:.bad} muss weg. `justify-content: center` ist überflüssig, also auch weg damit. ☞ [Beispiel: Sonne und Mond](https://codepen.io/gunnarbittersmann/pen/ZYbqKyK?editors=0100) --- > ```html,bad > <article class="decorated"> > <section> > ``` Ich glaube nicht, dass `article` das richtige HTML ist. Manchmal ist ein `div` einfach nur ein `div`. `section` nur, wenn der Abschnitt eine Überschrift hat (oder man mit ARIA eine geben kann, siehe Beispiel). > ```html,bad > <img width="32" height="auto" title="" alt="cross" src="data:image/webp;base64, > UklGRoYAAABXRUJQVlA4IHoAAABwBACdASooABsAAgA0JagB3BfAPwrlmf9A > wkD9APf/u0AGBrAFljez7+cLRAD+/p9hZ3svqll6///Cx16peF2iY3//30Vo > Oh3orQcuwZYH/FRP2whL4Bpul/1Aa0D8jj/5GtyHeCzYN+9OA8FmwUkC9vgV > hXCjKgIAAA=="> > ``` Das hast du jetzt nur in deinem Beispiel base64-codiert als Data-URL? Ansonsten ist das keine so gute Idee. 🖖 Live long and prosper {:@en} -- *“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”*{:@en} — Bruce Springsteen, Manchester 2025-05-14

@@Jenny > Was mr nicht gelungen ist, die bilder zu zentrieren. Am einfachsten geht das wohl `display: block; margin-inline: auto`. --- > ~~~css,bad > grid-template-columns: 1fr 1fr; > ~~~ Das wurde schon angesprochen, dass das für schmale Viewports nicht funktioniert. Entweder per Media-Query nur ab einer gewissen Mindest-Viewportbreite oder – mein Favorit – mit den Grid-Hausmitteln ```css,good grid-template-columns: repeat(auto-fit, minmax(min(12em, 100%), 1fr)); ``` wobei `12em` hier die beispielhafte Mindestbreite der Spalten ist. Außerdem willst du noch Zwischenraum zwischen den Spalten: bspw. `gap: 4em`. > ~~~css,bad > align-items: center; > justify-content:center; > ~~~ Du willst sicher nicht, dass die Bilder auf unterschiedlicher Höhe stehen. `align-items: center`{:.bad} muss weg. `justify-content: center` ist überflüssig, also auch weg damit. ☞ [Beispiel: Sonne und Mond](https://codepen.io/gunnarbittersmann/pen/ZYbqKyK?editors=0100) --- > ```html,bad > <section><img width="32" height="auto" title="" alt="cross" src="data:image/webp;base64, > UklGRoYAAABXRUJQVlA4IHoAAABwBACdASooABsAAgA0JagB3BfAPwrlmf9A > wkD9APf/u0AGBrAFljez7+cLRAD+/p9hZ3svqll6///Cx16peF2iY3//30Vo > Oh3orQcuwZYH/FRP2whL4Bpul/1Aa0D8jj/5GtyHeCzYN+9OA8FmwUkC9vgV > hXCjKgIAAA=="></section> > ``` Das hast du jetzt nur in deinem Beispiel base64-codiert als Data-URL? Ansonsten ist das keine so gute Idee. 🖖 Live long and prosper {:@en} -- *“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”*{:@en} — Bruce Springsteen, Manchester 2025-05-14