GRID Ausrichtung... und andere Katastrophen

[Herbert]

Ok, komme eher aus der Javascript-Ecke und habe nun das Vergnügen, das UX-Design zu gestalten. Stellt sich heraus, dass ich dafür offensichtlich ein viel zu großer Vollidiot bin. Ich versuche jetzt seit Stunden ein GRID hinzubekommen, dessen Inhalte in einer prozentual definierten Größe zentriert dargestellt werden. Letzter Entwurf dazu:

#grid-container {
			position: relative;
			display: grid;
			grid-template-columns: auto auto;
			background-color: orange; /* nur damit ich besser sehe, was der Container so treibt */
			width: 60vw;
			height: 60vh;
			justify-content: center;
			align-content: center;
		}
		.sizing-to-container {
			position: relative;
			background-color: blue; /* wieder nur damit ich besser sehe, was das Element so treibt */
			max-width: 40%;
/* Warum %? -- Width soll sich anpassen, wenn sich Width des Containers ändert */
			max-height: 70%;
/* Warum %? -- Height soll sich anpassen, wenn sich Height des Containers ändert */
		}
		
		img {
			object-fit: fill;
			max-width: 100%;
			max-height: 100%;
		}

HTML dazu:

<div id="grid-container">
	<div class="sizing-to-container"><img src="./Testbild.svg" alt="" /></div>
	<div class="sizing-to-container"><img src="./Testbild.svg" alt="" /></div>
</div>

Zum besseren Verständnis das ganze nochmals auf UNSEE zum Mitleiden: https://unsee.cc/d6b71cf8/

...das ist das Resultat, welches ich anstrebe.

Derzeit werden die Container Children überhaupt nicht dargestellt, ich bekomme lediglich einen orangen Container.

ARGH

...und danke für Ideen.

[djr]

Hallo Herbert,

ich bin mir nicht ganz sicher, wie Du das mit den Bildern in Deiner Skizze meinst:

max 100% aber auch kleiner, wenn nötig

Wie sollen die Bilder zueinander ausgerichtet sein, wenn sie weniger als 100% breit sind?

In jedem Fall ist die Basis:

👉 DEMO

<div id="grid-container">
  <img src="" alt="">
  <img src="" alt="">
</div>

[id="grid-container"] {
  display: grid;
  grid-template-columns: 1fr 4fr 4fr 1fr;
  grid-template-rows: 1.5fr 7fr 1.5fr;
  grid-template-areas: ". . . ."
                       ". a b ."
                       ". . . .";
}

[id="grid-container"] > :nth-child(1) {
  grid-area: a;
}

[id="grid-container"] > :nth-child(2) {
  grid-area: b;
}

[id="grid-container"] {
  height: 60vh;
  width: 60vw;
}

[id="grid-container"] > img {
  object-fit: contain;
  height: 100%;
  width: 100%;
}

[djr]

bzgl. der Ausrichtung der Bilder:

Dies geht mit object-position.

Beispiel:

👉 DEMO

[id="grid-container"] > img:nth-child(1) {
  object-position: right;
}
[id="grid-container"] > img:nth-child(2) {
  object-position: left;
}