djr: GRID Ausrichtung... und andere Katastrophen

Beitrag lesen

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%;
}