Einzelnen Beitrag anzeigen
  #4 (permalink)  
Alt 06.10.2021, 09:12
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.101
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Nein, komplex ist daran überhaupt nichts. CSS-Grid dient doch grade der Vereinfachung von Layouts, die früher überhaupt nicht möglich waren. Oder mit aufwendigen Java-Script Lösungen. So auch in diesem Fall.

Ich habe mal ein Beispiellayout erstellt.

Nach deinen bisherigen Angaben sehe ich eine Liste, in diesem Fall das dl-Element.

Code:
<dl>
</dl>
Innerhalb des dl-Elements dann für jede Bild-Text-Kombination

Code:
   <div>
      <dt><img src="" alt=""></dt>
      <dd></dd>
   </div>
Übersichtlicher geht's kaum.

Das entscheidende CSS dazu lautet

Code:
dl>div {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;
}
Für die Bildschirmbreite, ab der der Text neben dem Bild erscheinen soll (hier: 800px) zusätzlich

Code:
@media only screen and (min-width: 800px) {
   dl>div {
      grid-template-columns: 1fr 1fr;
   }
}
Dazu einfach noch die altbekannten üblichen Abstände, Rahmen, Farben und so weiter.

Ein Online-Beispiel dazu:

https://www.w3schools.com/code/tryit...e=GV6LDPDOW9RG

Nach Anklicken des grünen Run-Buttons kann die Fensterbreite durch verschieben des Mittelstegs geändert werden.

Geändert von MrMurphy (06.10.2021 um 23:51 Uhr)
Mit Zitat antworten