fix: consistent card heights and widths in homepage card grid

[Copilot]

Homepage card grids had two visual defects: phantom empty columns creating dead whitespace between cards, and cards in the same row rendering at different heights.

Root causes

• DocHomeCardContainer used repeat(auto-fit, minmax(224px, 30%)). The 30% hard cap means 3 columns consume only 90% of the container, leaving a visible gap.
• A later auto-fill change still reserved empty end-tracks, which could keep visible dead space.
• DocHomeCard (Box component="a") had no explicit display. Anchor elements are inline by default; without display: block, grid blockification is unreliable across browsers, so cards in the same row rendered at their intrinsic heights rather than stretching to match the tallest sibling.

Changes (src/components/MDXComponents/DocHome.tsx)

• DocHomeCardContainer now uses breakpoint-specific grid behavior:

  - gridTemplateColumns: "repeat(auto-fit, minmax(224px, 30%))",
  - justifyContent: "start",
  + gridTemplateColumns: {
  +   sm: "repeat(auto-fit, minmax(224px, 1fr))",
  +   md: "repeat(3, minmax(224px, 1fr))",
  + },

  • sm uses auto-fit + 1fr to avoid dead whitespace from empty tracks.
  • md and above enforce a fixed three-column layout for better desktop visual consistency.

• DocHomeCard adds display: "block" so the anchor is always a block-level grid item and stretches to fill the full row height via the default align-items: stretch.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
website-docs	Error		Jun 11, 2026 11:19am

[lilin90]

@copilot It seems that the card spacing issue hasn't been resolved.

[Copilot]

Pull request overview

This PR adjusts the homepage documentation “card grid” styling to eliminate inconsistent gaps and ensure cards in the same row render with consistent widths/heights across browsers.

Changes:

• Updated DocHomeCardContainer grid columns to repeat(auto-fill, minmax(224px, 1fr)) and removed justifyContent: "start" to better distribute column widths.
• Set DocHomeCard (anchor) to display: "block" to ensure reliable grid-item stretching behavior.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

@copilot It seems that the card spacing issue hasn't been resolved.

Updated in commit 8859a3b. I switched the card grid from auto-fill to auto-fit (repeat(auto-fit, minmax(224px, 1fr))) so empty end-tracks no longer reserve space and the dead spacing between cards is removed.

[lilin90]

@copilot For a better visual experience, please keep the three-column layout.

[Copilot]

@copilot For a better visual experience, please keep the three-column layout.

Updated in commit e4815ba. Desktop card grids now keep a three-column layout (md: repeat(3, minmax(224px, 1fr))), while smaller widths still use responsive auto-fit behavior.