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.

2

min-width: 0 on .card is doing a ton of work here. Without it, one ugly unbroken token in an error string (order IDs, pasted URLs, whatever) will force min-content sizing and you get the “why is my grid wider than the viewport” nonsense on mobile.

One thing that’s bitten me in this exact pattern: make sure the thing actually holding the text can shrink too. If .error contains a <p>/span that’s still acting like it has a min-content floor, overflow-wrap: anywhere won’t save you and you’ll still get one rogue card blowing out while the rest behave. I’ve had to put min-width: 0 on the inner wrapper more than once when everything “looked right” in CSS but didn’t in reality.

And yeah, I’d drop the kirupa link — the snippet + the failure mode explanation is the value.