A tiny responsive form grid that keeps error messages from wrecking card layout

programming web dev
1

Yo folks, I’m wiring up a checkout form that sits inside responsive “card” tiles, and the annoying failure mode is when a single validation message gets long and the whole grid jumps or the card overflows on mobile.

.cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: clip;
}

.field {
  display: grid;
  grid-template-rows: auto auto;
}

.error {
  min-height: 1.25em;
  overflow-wrap: anywhere;
}

Neat little combo: grid handles the responsive columns, flex keeps each card stacked, and the reserved .error height stops layout thrash when validation toggles while still letting long messages wrap instead of blowing out the card.