Jo, darum kümmere ich mich 
Danke jedenfalls 
Beiträge von Carl Stadler
-
-
Wie kann man dann bewirken, dass zwischen unterschiedlichen Segmenten unterschiedlich viel Abstand ist?
-
HTML
Alles anzeigen<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <section class="maingrid"> <nav id="gridbanner"></nav> <section id="griditem0" class="Verlauf"> <a href="index.html" title="Home">⠀Home⠀</a> </section> <a id="griditem1" class="grid mhover" href="index.html" title="Menu1"> <div>Menu1</div> </a> <a id="griditem2" class="grid mhover" href="index.html" title="Menu1"> <div>Menu1</div> </a> <a id="griditem3" class="grid mhover" href="index.html" title="Menu1"> <div>Menu1</div> </a> <a id="griditem4" class="grid mhover" href="index.html" title="Menu1"> <div>Menu1</div> </a> <div id="griditem5" class="main">Maincontent</div> <div id="griditem6" class="vorschlag">Vorschlag 1</div> <div id="griditem7" class="vorschlag">Vorschlag 2</div> <div id="griditem8" class="vorschlag">Vorschlag 3</div> <div id="griditem9" class="vorschlag">Vorschlag 4</div> </section> </body> </html>Und so soll es dann aussehen (zum besseren Verständnis):
siehe Anhang
-
Hey!
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.maingrid { display: grid; grid-column-gap: auto auto auto; grid-row-gap: 20px 40px 500px 40px 40px 40px; grid-template-columns: 22% 22% 22% 22%; grid-template-rows: 200px 40px 45px 200px 200px 200px 200px; justify-content: space-between; }Danke im Vorraus, Carl