GRID allgemein und resize geht nicht bei DIV

[Henry]

Hallo,

Ein Element wie DIV lässt sich doch normalerweise durch RESIZE größenänderbar machen. Funktioniert aber scheinbar nicht bei GRID so einfach?

das Beispiel funktioniert einigermaßen, wie ich möchte. Aber auch wenn das Ergebnis für mich stimmt, so bin ich sicher, dass im Lösungsweg viele Fehler stecken, weil vieles nur durch Try&Error. Daher einige Fragen:

Eigentlich wollte ich die DIV horizontal ändern können.

.item3 { grid-area: main;resize:horizontal;}

btw. warum hat das Codefeld hier eigentlich immer eine Scrollleiste, auch wenn gar nicht nötig? Sieht irgendwie unschön aus.

Da das aber nicht fuktioniert, habe ich mir beholfen, indem ich ein Textfeld eingebaut habe, was ja von Haus aus streckbar ist und das funktioniert dann auch, nur eben leider als Notlösung. Geht doch irgendwie das DIV auch streckbar darin zu machen?

Bei dem Textfeldeinbau gabs zu Anfang auch ein Problem, verbreitern ging, kleiner auch, aber das DIV passte sich dann nur teilweise auf klein an. Daher habe ich das gemacht:

grid-template-columns: auto 1fr 1fr;

seltsam jetzt ohne scrollbalken, hmm

Aber ist diese Aufteilung/Lösung OK?

Überhaupt Aufteilung. Die Höhe sollte 100% Viewport sein, wobei die mittlere Reihe sich in die Höhe strecken soll. Da dachte ich zuerst gebe ich oben und unten einen Wert von zb. 5vh und in der Mitte auto.

grid-template-rows: 5vh auto 5vh;

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;

Gruss
Henry