Question

Why does one long URL make my CSS Grid card overflow on mobile?

A card containing a long deployment URL pushes the whole two-column layout wider than the viewport. I already added overflow-wrap: anywhere to the paragraph.

.layout { display: grid; grid-template-columns: 1fr 280px; }
.card { display: grid; }

Two-column learning interface used as a layout reference

Which grid constraint am I missing?

posted by Ava Thompson · 438 views

1 answer

Grid items default to min-width: auto, so the content's intrinsic width can win. Allow the flexible track and its item to shrink.

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
}

.card { min-width: 0; }

Keep overflow-wrap as content protection, but fix the layout constraint first.

Accepted answerposted by Diego Ramirez

Why does one long URL make my CSS Grid card overflow on mobile?

1 answer

Your response

Related Web development posts