Hallo,
ich bin dabei, meine alte Webseite (mit immer aktuellen Inhalten) auf CSS für ein responsives Design umzustellen. Ich habe zwar früher schon CSS benutzt, aber ansonsten auch viel die alten HTML-Gestaltungselemente eingesetzt (Tabelle...).
Ich habe ein Grid angelegt mit 6 gleich großen Spalten, von denen die linke und die rechte komplett mit Navigation, Links oder Werbung gefüllt sind. Die mittleren vier enthalten von oben nach unten den Header, eine "Unterüberschrift" und dann den eigentlichten Inhalt.
Eigentlich erwarte ich, dass die linke und rechte Spalte gleich breit sind, aber regelmäßig bläht sich die rechte Spalte auf, so dass der mittlere Bereich zusammengedrückt wird. Die rechte Spalte ist knapp doppelt so breit wie die linke. Das leuchtet mir nicht ein und ich möchte es gerne ändern. Dazu habe ich schon einiges versucht, leider ohne Erfolg. Hier die css (soweit ich vermute, dass es relevant ist):
Code:
body { display: grid;
grid-gap: 5px;
max-width: 99em;
grid-template-columns: 1fr, 4fr, 1fr;
grid-template-areas: "navi head head head head asid"
"navi ntag ntag ntag ntag asid"
"navi arti arti arti arti asid"
"navi foot foot foot foot asid";
grid-template-rows: 1fr auto;
background-color: #DFEAFF;
align-content: start;
}
footer { grid-area: foot;
}
nav { grid-area: navi;
text-align: center;
}
article { grid-area: arti;
grid-row: 3 / 4; min-height: 85vh;
}
#werbung { grid-area: werb;
}
ntag { grid-area: ntag; min-height: auto; grid-row: 2 / 3;
}
aside { grid-area: asid; text-align: center;
}
header { grid-area: head; max-height: 7em; grid-row: 1 / 2;
}
header, nav, main, article, section, aside, footer, ntag { border-radius: 0.7em 0.7em 0.7em 0.7em; border: 1px solid; border-color: #0000C0; background-color: #DCDCDC; padding: 10px; margin: 5px;
}
