nicht angemeldet
Matthias ScharwiesServus!
funktionierte aber nicht, weil dann grösserer Text oben/unten aus dem Raster ausbrach. Da habe ich es dann umgekehrt probiert und die mitte mit einem Vergleichswert von 20fr beziffert, wobei auch 20, 15 oder sonstwas funktioniert. Gehts zwar, aber;Gibt bestimmt einen richtigeren/besseren Weg?
grid-template-rows: auto 20fr auto;
Ja, auto bezeichnet (wie in der vorherigen Antwort) ja die Mindestgröße des Inhalts. Den verfügbaren Raum in der Mitte willst du den verbleibenden Zellen zuweisen. Da musst du keine 15 oder 20 fr-Teile nehmen, sondern kannst den Wert auf 1 setzen:
<style>
body {
height:100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
}
body > * {
background-color: rgba(255, 255, 255, 0.8);
}
header, footer {grid-column: 1/ -1;}
</style>
</head>
<body>
<header><h1>Header</h1></header>
<div class="item2"><textarea>Input</textarea></div>
<div class="item3">Main</div>
<aside>Mainx</aside>
<footer><h3>Footer</h3></footer>
</body>
Ich habe mal einige der divs durch header, footer und aside ersetzt, den div.grid-container gestrichen und das CSS aufgeräumt. Grid macht ja viel automatisch; also benötigst Du nur die Festlegung für header und footer, damit sie über die gesamte Breite gehen.
Herzliche Grüße
Matthias Scharwies
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
Henry
Rolf B
Matthias Apsel
Linuchs
Auge