GRID allgemein und resize geht nicht bei DIV

[Matthias Scharwies]

Servus!

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

Ich hab jetzt erst mal nachlesen müssen: Sowohl SELF-Wiki als auch MDN verweisen daruf, dass resize nur geht, wenn overflownicht visible (Der default-Wert) ist. Deshalb würde ich erst einmal overflow: auto setzen.

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;}

Ich würde resize nur verwenden, wenn ich ein Element habe, das wie ein leeeres textarea erst einmal klein und dann beim Ausfüllen groß gezogen werden soll. Ich habe das im Self-Wiki einmal mit float und begleitendem Text nachgebaut:

CSS/Eigenschaften/resize

Jetzt nimmst Du Grid Layout und sagst dem Browser, dass er sich um die Einteilung der Seite kümmern soll. Er nimmt die Elemente aus dem „normalen“ Elementfluss und überlegt anhand Deiner Werte und des Inhalts, wie er sie platzieren soll.

Ich habe die Textarea mal verkleinert:

.grid-container {
  grid-template-columns: auto 1fr 1fr;
}

textarea{width:10em; margin-right:5em;resize:horizontal;height:100%;border:none;}

Das sagt dem Browser, dass das .item2 auf auto gestellt ist. Hier verlasse ich mich auf die MDN: Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

1fr 1fr teilt den übrigen Raum auf die beiden anderen divs auf. Genau wie erwartet.

Wenn Du jetzt das textarea-Element, den Inhalt der Rasterzelle vergrößerst, vergrößert sich auch das div.item2 und die anderen werden entsprechend kleiner, bis sie so groß wie ihr Inhalt (min-content) werden und dann nach außerhalb des Viewports wandern (Scrollbalken inklusive).

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?

Nur wenn es keine Rasterzelle im Grid Layout ist. Das Grid Layout richtet sich imho nach dem Inhalt und ignoriert weitere Größenangaben.

Ein div innerhalb der Rasterzelle geht:

  <div class="item2"><div class="textarea"></div></div>

Ganz schön viele divs hier. Mit header, footer und aside hätte man hier wsl. mehr Übersicht geschaffen.

Herzliche Grüße

Matthias Scharwies