Turning a location-page mockup into a reusable responsive component without layout drift

What was happening

A redesigned location section used map-pin markers beside headings and descriptive copy. The first implementation visually assumed a fixed number of columns, so fewer items no longer centered correctly. Additional QA found pins sitting too low, numbering that no longer helped the design, descriptions wrapping beside the marker incorrectly, and section width extending beyond neighboring content.

Why the obvious solution was not enough

The section needed to match the approved mockup while still behaving correctly for variable content counts. Fixing one screenshot with hard-coded margins would only create the next responsive bug.

How the solution works

1. Move the section into the same shared content container width used by neighboring blocks so the left and right edges align across the page.
2. Use CSS grid with content-aware column behavior rather than assigning a layout that only works when exactly five cards exist.
3. Treat the pin and heading as one row, align the marker to the heading's first line, and place the description in its own row so wrapped text does not begin under the icon.
4. Remove decorative numbering when it competes with the actual hierarchy and does not help the visitor understand the content.
5. Use breakpoint-specific column counts and centered grid behavior so three or four cards do not leave an obviously empty final track.
6. Keep text color tied to the background state so green cards never inherit low-contrast gray body copy.
7. Test the component using short and long headings as well as three-, four-, and five-item data sets before considering the layout complete.

.location-risks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1.25rem;
}

.location-risk__heading {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: .75rem;
}

.location-risk__description {
  grid-column: 2;
}

What should be verified before shipping

• Render three, four, and five items and confirm the visual center still feels intentional.
• Use a two-line heading and verify the marker aligns with the first line instead of the middle of the card.
• Check that descriptions start under the heading text, not under the pin.
• Compare section width with the sections directly above and below it.
• Verify contrast for normal, hover, and highlighted states.
• Test mobile and tablet landscape because the most obvious spacing regressions appeared at intermediate widths.

What changed

The section stopped depending on one perfect content count and became a reusable location component that could survive real editorial variation without manual spacing fixes.

Reusable lesson

A mockup is one state of a component. Production implementation should identify which parts are structural and then test the other content states the design file does not show.