grid-row-gap wird ignoriert - die Sektionen kleben alle untereinander "aneinander"...

  • Hey! :D

    Vorab: Ich bin recht neu auf dem Gebiet html und CSS, deswegen kann's auch gut sein, dass der Fehler recht eindeutig ist ;).
    Naja, also, ich programmiere gerade an einer Website und nutze dazu hauptsächlich CSS Grid, nachdem mir jemand diese Methode empfohlen hat.

    Es hat auch alles gut mit grid-template-columnsund grid-template-rows funktioniert, bis ich mich gefragt habe, warum alle Sektionen den selben Abstand untereinander haben. Ich hatte nämlich eigentlich mit grid-row-gap: 20px 40px 500px 40px 40px 40px die Abstände alle angegeben. Schnell war der Fehler gefunden: Ich hatte allen die selbe margin gegeben, wo sich mir auch die Frage stellt, warum die überhaupt in einem Grid etwas ausmacht. Naja, als ich dann die Zeile mit der margin überall rausgenommen hatte, klebten, wie im Titel beschrieben, die einzelnen "Segmente" alle direkt untereinander, obwohl ich den Abstand ja definiert habe.


    Anmerkung: Bei der grid-column-gaphab ich das Problem nicht, weil ich gleich justify-content: space-betweenverwendet habe.

    Woran könnte das nun also liegen?

    Hier der Code, der das ganze definiert:

    Code
    1. .maingrid {
    2. display: grid;
    3. grid-column-gap: auto auto auto;
    4. grid-row-gap: 20px 40px 500px 40px 40px 40px;
    5. grid-template-columns: 22% 22% 22% 22%;
    6. grid-template-rows: 200px 40px 45px 200px 200px 200px 200px;
    7. justify-content: space-between;
    8. }

    Danke im Vorraus, Carl

  • Und so soll es dann aussehen (zum besseren Verständnis):

    siehe Anhang

  • grid-column-gap und grid-row-gap erwarten genau einen Wert, nicht mehrere. Zudem dürfte da auch noch einiges an CSS fehlen.

    Dein HTML ist allerdings auch schon falsch:

    • Doctype fehlt (<!DOCTYPE html>)
    • <meta charset="utf-8" /> fehlt
    • <meta name="viewport" […] fehlt
    • das section-Element direkt unterhalb von body gehört da auch nicht so hin (display:grid kann man auch body verpassen)
    • die Links gehören in ein <nav> und dürfen zudem kein <div> enthalten
    • div.main wäre gerne ein <main>
    • was div.vorschlag genau werden soll, weiß ich nicht aber das dürfte sich auch nochmal gruppieren lassen
    • nummerierte IDs sind nicht sinnvoll, vergebe die IDs (wenn überhaupt) nach Funktion o.ä.