Komplexes Konstrukt vereinfachen

[Jenny]

Hallo Gunnar,

besten Dank.

Am einfachsten geht das wohl display: block; margin-inline: auto.

Das klappt bei mir leider nicht

  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

  grid-template-columns:
    repeat(auto-fit, minmax(min(12em, 100%), 1fr));

wobei 12em hier die beispielhafte Mindestbreite der Spalten ist.

OK, ist angekommen

Außerdem willst du noch Zwischenraum zwischen den Spalten: bspw. gap: 4em.

  align-items: center;
  justify-content:center;

Du willst sicher nicht, dass die Bilder auf unterschiedlicher Höhe stehen. align-items: center muss weg. justify-content: center ist überflüssig, also auch weg damit.

☞ Beispiel: Sonne und Mond

Das ist mir noch zu schwierig😉

---

<article class="decorated">
  <section>

Ich glaube nicht, dass article das richtige HTML ist. Manchmal ist ein div einfach nur ein div.

OK

section nur, wenn der Abschnitt eine Überschrift hat (oder man mit ARIA eine geben kann, siehe Beispiel).

Das hast du jetzt nur in deinem Beispiel base64-codiert als Data-URL? Ansonsten ist das keine so gute Idee.

Ja, nur zur Demo.

🖖 Live long and prosper