Komplexes Konstrukt vereinfachen

[Gunnar Bittersmann]

@@Jenny

Was mr nicht gelungen ist, die bilder zu zentrieren.

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

---

  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.

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

---

<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).

  <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