Recipe: Textarea + autoresize

A zero-dependency textarea that grows with its content. No libraries, no event handlers — just CSS grid trickery.

The invisible div mirrors the textarea content, forcing the grid row to expand.

How it works

  • Both the textarea and a hidden div sit on the same CSS grid cell.
  • The div is invisible but still takes up space, so the row height matches the content.
  • No JavaScript resize observer, no onInput handler. Pure CSS.
  • Works in every modern browser. The rows=1 sets the minimum height.
← Back to docs·Meridian UI Recipes