• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Warum überlappen sich die Elemente (Flipboxen) beim Grid?

Lisa K.

Lisa K.

Neues Mitglied
Hallo zusammen!

Ich hoffe, es kann mir hier jemand helfen ...

Ich habe gerade ein Grid erzeugt und folgenden Code in die Spalten-Einstellungen gegeben:

display:grid;
grid-template-columns: 30.3% 30.3% 30.3%;
align-items: center;
row-gap: 15vw;
justify-content: space-between;
grid-rows: auto;


Jetzt verhält es sich so, dass wenn ich row-gap nicht dabei habe, dass die Bilder sich überlappen (siehe Bild).
Wenn ich row-gap eingebe (hier 15vw) dann gibt es einen Abstand zwischen den Zeilen, der sich jedoch verändert je nachdem wie groß der Bildschirm ist.

Ich hätte gerne gleich große Abstände zwischen den Zeilen und Spalten. Wie kann ich das machen? Was mach ich falsch.

Was mir auch aufgefallen ist, ist dass die Spaltenhöhe vom Container kleiner ist, als die Elemente und die Rahmen der Elemente von der Höhe kleiner sind als die Elemente selbst.

Ich habe hier übrigens Flip-Boxen eingefügt. Könnte es auch daran liegen? Brauchen die Flip-Boxen vielleicht spezielle Einstellungen, dass Sie sich in einem Grid wie Bilder verhalten?

Vielen Dank schon mal für eure Hilfe.

Liebe Grüße
Lisa
 

Anhänge

  • Bild1.png
    Bild1.png
    737,8 KB · Aufrufe: 3
  • Bild2.png
    Bild2.png
    711,3 KB · Aufrufe: 3
  • Bild3.png
    Bild3.png
    1.013,1 KB · Aufrufe: 3
Hallo

Ohne Link zu der Seite werden wir dir kaum helfen können. Zudem ist "Flipbox" keine HTML- oder CSS-Bezeichnung, damit können die meisten (so auch ich) nichts anfangen.

Grundsätzlich nutzt du die Fähigkeiten von CSS-Grid nicht aus. Zum Beispiel die zeitgleich mit CSS-Grid eingeführte Einheit "fr". Wahrscheinlich (reine Spekulation von mir) ist der HTML-Aufbau viel zu kompliziert.
 
Zuletzt bearbeitet:
Eine Frage kann man schon beantworten:
Wenn ich row-gap eingebe (hier 15vw) dann gibt es einen Abstand zwischen den Zeilen, der sich jedoch verändert je nachdem wie groß der Bildschirm ist.

Ich hätte gerne gleich große Abstände zwischen den Zeilen und Spalten. Wie kann ich das machen? Was mach ich falsch.
Zum Vergrößern anklicken....
Informiere dich über Viewport-Units:
www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
Das 15vw, das Du verwendest ist ein Bruchteil, 15%, der Größe des Browserfensters. Wenn Du einen festen Abstand möchtest, musst Du eine feste Maßeinheit wie px oder (r)em verwenden.
 
Ich habe mal zum Testen und Spielen eine Beispieldatei erstellt. Damit kannst du erst mal ausprobieren in wie weit die deinen Vorstellungen entspricht, auch was die Flexibilität (Responsivität) betrifft.

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Bildergalerie</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

   /* Basisangaben */
   @media all {
      body {
         padding: 0.5rem;
         margin: 0rem auto 0rem auto;
      }
   }

   /* Grafiken */
   @media all {
      figure {
         text-align: center;
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
         display: inline-block;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0px;
      }
      figcaption {
         text-align: left;
         display: inline-block;
      }
   }

   /* .bildergalerie */
   @media all {
      .bildergalerie {
         display: grid;
         grid-template-columns: repeat(1, 1fr);
         gap: 0.5rem;
      }
      .bildergalerie figure {
         border: 1px solid grey;
         border-radius: 0.5rem;
      }
      .bildergalerie figure img {
         border-radius: 0.5rem 0.5rem 0rem 0rem;
      }
      .bildergalerie figcaption {
         font-size: 1.5rem;
         padding: 0.5rem 0rem 0.5rem 0rem;
      }
   }
   @media only screen and (min-width: 800px) {
      .bildergalerie {
         grid-template-columns: repeat(2, 1fr);
      }
   }
   @media only screen and (min-width: 1200px) {
      .bildergalerie {
         grid-template-columns: repeat(3, 1fr);
      }
   }
   @media only screen and (min-width: 1600px) {
      .bildergalerie {
         grid-template-columns: repeat(4, 1fr);
      }
   }

   </style>
</head>
<body>
   <header>
      <h1>Bildergalerie</h1>
   </header>
   <main>
      <section class="bildergalerie">
         <figure>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/VW_K%C3%A4fer_Baujahr_1966.jpg/1024px-VW_K%C3%A4fer_Baujahr_1966.jpg">
            <figcaption>VW Käfer Baujahr 1966</figcaption>
         </figure>
         <figure>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/12-03-01-autostadtr-by-RalfR-18.jpg/1024px-12-03-01-autostadtr-by-RalfR-18.jpg">
            <figcaption>VW Bus im Zeithaus</figcaption>
         </figure>
         <figure>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/1968_Volkswagen_Type_3_Variant_in_Peru_Green%2C_front_right.jpg/1024px-1968_Volkswagen_Type_3_Variant_in_Peru_Green%2C_front_right.jpg">
            <figcaption>VW 1600 Variant (1966)</figcaption>
         </figure>
         <figure>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Volkswagen_412_L_Variant_Classic-Days_2022_DSC_0161.jpg/1280px-Volkswagen_412_L_Variant_Classic-Days_2022_DSC_0161.jpg">
            <figcaption>VW 412 L Variant (1972 - 1974)</figcaption>
         </figure>
      </section>
   </main>
   <footer>
      <p>Originaldiskussion: <a href="https://www.html.de/threads/warum-uberlappen-sich-die-elemente-flipboxen-beim-grid.61908/">https://www.html.de/</a></p>
   </footer>
</body>
</html>

Ich habe mich grade noch mal mit Flip-Box beschäftigt. Soweit ich das verstanden habe ist das schlicht ein Effekt, bei dem scheinbar die Rückseite eines Bildes / einer Box angezeigt wird.

Die Artikel dazu sind schon sehr alt. Ich kann das zwar nicht ausprobieren, aber offensichtlich wird die scheinbare Drehung durch eine Hover-Funktion mit der Maus bewirkt. Damit sind Touchscreen-Nutzer, inzwischen die deutliche Mehrheit, außen vor. Deshalb würde ich so eine Funktion selbst nicht nutzen, außer um etwas rumzuspielen.
 
Zuletzt bearbeitet:
Oder ist es besser ich mache so etwas mit Flexbox?

Und wenn ja, wie lautet der Code? (gleiche Abstände horizontal und vertikal)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben