Skip to content

CSS Showcase · Live Demo

Textareas that flex.

One composer that auto-grows with a grid replicated-value trick, gets a resize handle on desktop, and anchors to the bottom on mobile.

Featured demo

mobile · sheet-composer
47 / 140

mobile design patterns

textarea-sheet-composer.css
/* Bottom-anchored chat composer */
.composer {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.5rem;
  padding: 0.5rem;
  border-top: 1px solid var(--border);
  background: var(--card);
}

.composer textarea {
  resize: none;
  max-height: 6rem;
}

CSS features used

  • • Grid replicated-value autosize
  • • resize: vertical
  • • Sticky positioning
  • • attr() content
  • • CSS custom properties
  • • Semantic tokens

CSS Showcase · Share

Share this demo as a 1:1 image

A 2048×2048 PNG with the live current view, the title, and the CSS features — for social posts, docs, and READMEs.

The snapshot follows the device selected on the page — switch between desktop, iPad, and mobile above and the card updates.